| 01 使用方法
- 引入插件
-
-
<script type="text/javascript" src="masonry.pkgd.min.js">
</script>
- HTML结构
-
<div
class=
"grid">
-
<div
class=
"grid-item">...</div>
-
<div
class=
"grid-item grid-item--width2">...</div>
-
<div
class=
"grid-item">...</div>
-
...
-
</div>
-
.grid-item { width:
200px; }
-
.grid-item--width2 { width:
400px; }
- JS
jQuery用法：
-
-
$(
'.grid').masonry({
-
// options
-
itemSelector:
'.grid-item',
-
columnWidth:
200
-
});
原生JS:
-
var elem =
document.querySelector(
'.grid');
-
var msnry =
new Masonry( elem, {
-
// options
-
itemSelector:
'.grid-item',
-
columnWidth:
200
-
});
-
-
var msnry =
new Masonry(
'.grid', {
-
// options
-
});
- 只用HTML不用js的方法
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>| 02 配置项options
- columnWidth
插件建议设置columnWidth。如果columnWidth未设置，则插件将使用第一个项目的宽度。columnWidth可以设置值为CSS类，这样就使用CSS设置的宽度。
- itemSelector
指定哪些子元素将用作布局中的项目元素。
- gutter
在项目元素之间添加水平空间。垂直空间可以使用margin-bottom。
- horizontalOrder
值true或者false。项目是否按顺序从左到右排列。
- percentPosition
设置组件的位置（尺寸）为百分比而非像素数。percentPosition: true可以使宽度为百分比的组件不改变他们原本的位置。
- stamp
指定在布局中标记哪些元素。插件将在初始化时在标记元素下方布置项目。
- fitWidth
根据容器的父元素的大小，设置容器的宽度以适合可用的列数。启用后，您可以使用CSS将容器居中。fitWidth: true不适用于按百分比宽度设置尺寸的元素。无论是columnWidth需要被设置为一个固定的大小，如columnWidth: 120，或项目必须像素的固定大小的，像width: 120px。否则，容器和物品的宽度将彼此折叠。
- originLeft
控制水平方向布局，设置true从左开始，false从右开始。
- originTop
控制垂直方向布局，true从上到下，false从底部到上。
- containerStyle
设置为null，取消容器的所有CSS样式。
- transitionDuration
布局改变时的过度时间。
- stagger
一个项目改变时的过度时间
- resize
调整窗口大小时调整大小和位置。默认启用resize: true。
- initLayout
在初始化时启用布局。默认启用initLayout: true。
| 03 方法methods
- masonry()
加载实例
- layout()
重新布局
- layoutItems()
布局指定项目
- stamp()
在排列中固定指定项目，Masonry会围绕被固定的元素进行排列。unstamp
解除指定元素的stamp 状态。
- appended()
在最后添加项目
- prepended()
在前面添加项目
- additems()
添加项目，但布局不会重排
- remove()
移除项目
- on
增加Masonry事件监听
-
// jQuery
-
var msnry = $grid.masonry(
'on', eventName, listener )
-
// vanilla JS
-
msnry.on( eventName, listener )
- off
移除Masonry事件
-
-
// jQuery
-
var msnry = $grid.masonry(
'off', eventName, listener )
-
// vanilla JS
-
msnry.off( eventName, listener )
- once
触发一次Masonry事件
- reloaditems
重新加载所有项目
- destroy
完全删除Masonry状态，项目恢复初始。
- getItemElements
返回项目元素的数组
- jQuery.fn.data('masonry')
从jQuery对象中取出Masonry实例，以便读取Masonry的属性。
- Masonry.data()
通过元素取出Masonry实例，Masonry.data()用于从HTML初始化的Masonry实例中取出Masonry属性。
| 04 事件Events
- jQuery事件绑定
-
-
// jQuery
-
var $grid = $(
'.grid').masonry({...});
-
-
function onLayout() {
-
console.log(
'layout done');
-
}
-
// bind event listener
-
$grid.on(
'layoutComplete', onLayout );
-
// un-bind event listener
-
$grid.off(
'layoutComplete', onLayout );
-
// bind event listener to be triggered just once. note ONE not ON
-
$grid.one(
'layoutComplete',
function() {
-
console.log(
'layout done, just this one time');
-
});
-
-
- jQuery事件侦听器有一个event参数，而普通JS侦听器没有。
-
// jQuery, has event argument
-
$grid.on(
'layoutComplete',
function( event, items ) {
-
console.log( items.length );
-
});
-
-
// vanilla JS, no event argument
-
msnry.on(
'layoutComplete',
function( items ) {
-
console.log( items.length );
-
});
- 原生JS事件绑定
-
-
// vanilla JS
-
var msnry =
new Masonry(
'.grid', {...});
-
-
function onLayout() {
-
console.log(
'layout done');
-
}
-
// bind event listener
-
msnry.on(
'layoutComplete', onLayout );
-
// un-bind event listener
-
msnry.off(
'layoutComplete', onLayout );
-
// bind event listener to be triggered just once
-
msnry.once(
'layoutComplete',
function() {
-
console.log(
'layout done, just this one time');
-
});
- layoutComplete事件
在布局的所有定位完成后触发
- removeComplete事件
删除元素item后触发
| 案例一
本案例为导航切换显示项目
显示效果：
html结构：
-
-
<div class="wrap">
-
<div class="nav clearfix">
-
<ul>
-
<li>
<a href="#" class="all">全部
</a>
</li>
-
<li>
<a href="#" class="cate1">分类一
</a>
</li>
-
<li>
<a href="#" class="cate2">分类二
</a>
</li>
-
</ul>
-
</div>
-
-
<div class="grid">
-
<div class="grid-item">
-
<img src="images/01.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/02.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/03.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/04.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/05.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/06.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/07.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/08.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/09.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/10.jpg" alt="">
-
</div>
-
</div>
-
-
-
</div>
js:
-
-
<script type="text/javascript" src="jquery-3.5.1.min.js">
</script>
-
<script type="text/javascript" src="masonry.pkgd.min.js">
</script>
-
<script>
-
$(
'.grid').masonry({
-
// options
-
itemSelector:
'.grid-item',
-
// columnWidth: 300,
-
gutter:
10,
-
// fitWidth: true
-
});
-
$(
'.cate1').click(
function(){
-
$(
'.grid-item').eq(
2).css(
'display',
'none');
-
$(
'.grid-item').eq(
4).css(
'display',
'none');
-
$(
'.grid-item').eq(
6).css(
'display',
'none');
-
$(
'.grid-item').eq(
1).css(
'display',
'block');
-
$(
'.grid-item').eq(
3).css(
'display',
'block');
-
$(
'.grid-item').eq(
5).css(
'display',
'block');
-
$(
'.grid').masonry()
-
})
-
$(
'.cate2').click(
function(){
-
$(
'.grid-item').eq(
1).css(
'display',
'none');
-
$(
'.grid-item').eq(
3).css(
'display',
'none');
-
$(
'.grid-item').eq(
5).css(
'display',
'none');
-
$(
'.grid-item').eq(
2).css(
'display',
'block');
-
$(
'.grid-item').eq(
4).css(
'display',
'block');
-
$(
'.grid-item').eq(
6).css(
'display',
'block');
-
$(
'.grid').masonry()
-
})
-
$(
'.all').click(
function(){
-
$(
'.grid-item').css(
'display',
'block');
-
$(
'.grid').masonry();
-
})
-
</script>
| 案例二
本案例为ajax加载更多项目，要在服务器中运行
效果如下：
html结构：
-
<div class="wrap">
-
-
<div class="grid">
-
<div class="grid-item">
-
<img src="images/01.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/02.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/03.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/04.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/05.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/06.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/07.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/08.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/09.jpg" alt="">
-
</div>
-
<div class="grid-item">
-
<img src="images/10.jpg" alt="">
-
</div>
-
</div>
-
-
-
</div>
js：
-
-
<script type="text/javascript" src="jquery-3.5.1.min.js">
</script>
-
<script type="text/javascript" src="masonry.pkgd.min.js">
</script>
-
<script>
-
$(
'.grid').masonry({
-
itemSelector:
'.grid-item',
-
gutter:
10,
-
});
-
-
h = $(
'.grid').height();
-
var bBtn =
true;
-
$(
window).scroll(
function(){
-
-
h2 = $(
window).scrollTop() + $(
window).height();
-
if( h < h2 && bBtn){
-
-
bBtn =
false;
-
-
$.ajax({
-
type:
"get",
-
url:
"data.json",
-
dataType:
"json",
-
success:
function(str){
-
var str =
JSON.stringify(str);
-
var json =
eval(
'('+ str +
')');
-
var json =
JSON.parse( str );
-
if(json.code){
-
bBtn =
true;
-
}
-
-
for(
var i=
0;i<json.list.length;i++){
-
var list = json.list[i];
-
-
for(
var j=
0;j<list.src.length;j++){
-
var $content = $(
'<div class="grid-item"><img src="'+ list.src[j] +
'" /></div>' );
-
$(
'.grid').append( $content ).masonry(
'appended', $content );
-
}
-
-
}
-
-
},
error:
function (XMLHttpRequest, textStatus, errorThrown) {
-
alert(errorThrown);
-
}
-
});
-
-
}
-
})
-
</script>
转载：https://blog.csdn.net/ssszzz87/article/details/106315458
查看评论