瀑布流插件Masonry的配置和使用
是一个以瀑布流布局呈现网页元素的JS库，它可以使多个不规则宽高的元素以恰当的顺序排列 ，增加美观度。masonry官网：https: masonry des
是一个以“瀑布流”布局呈现网页元素的JS库，它可以使多个不规则宽高的元素以恰当的顺序排列 ，增加美观度。
masonry官网： https://masonry.desandro.com/
CDN
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
html代码
<div class="grid"><div class="grid-item"></div><div class="grid-item"></div>...</div>
配置方式
// jQuery方式
$('.grid').masonry({
columnWidth: 200,
itemSelector: '.grid-item'
});
// Vanilla方式
var msnry = new Masonry( '.grid', {
columnWidth: 200,
itemSelector: '.grid-item'
});
设置网格宽度
columnWidth: 80
columnWidth: elements
columnWidth: '.grid-sizer'
.grid-item { width: 20%; }
全部属性配置
$('.grid').masonry({
columnWidth: 200,
itemSelector: '.grid-item'， // 要布局的网格元素
gutter：10, // 网格间水平方向边距，垂直方向边距使用css的margin-bottom设置
percentPosition：true, // 使用columnWidth对应元素的百分比尺寸
stamp:'.grid-stamp', // 网格中的固定元素，不会因重新布局改变位置，移动元素填充到固定元素下方
fitWidth: true, // 设置网格容器宽度等于网格宽度，这样配合css的auto margin实现居中显示
originLeft: true, // 默认true网格左对齐，设为false变为右对齐
originTop: true, // 默认true网格对齐顶部，设为false对齐底部
containerStyle: { position: 'relative' }, // 设置容器样式
transitionDuration: '0.8s', // 改变位置或变为显示后，重布局变换的持续时间，时间格式为css的时间格式
stagger: '0.03s', // 重布局时网格并不是一起变换的，排在后面的网格比前一个延迟开始，该项设置延迟时间
resize： false, // 改变窗口大小将不会影响布局
initLayout: true, // 初始化布局，设未true可手动初试化布局
});
方法调用方式
// jQuery方式。重新布局，添加元素，另一种方式添加元素，重新布局
$grid.masonry().append( elem ).masonry( 'appended', elem ).masonry();
// vanilla方式。同上
var msnry = new Masonry( '.grid', {...});
gridElement.appendChild( elem );
msnry.appended( elem );
msnry.layout();
全部方法
$grid.masonry(); // 重新布局
$grid.masonry( options ); // 修改设置，再重新布局
$grid.masonry( 'layoutItems', items, isStill ); // 重布局指定元素，isStill接受布尔值，表示是否变换
$grid.masonry( 'stamp', $stamp ); // 固定元素
$grid.masonry( 'unstamp', $stamp ); // 解除固定
$grid.masonry( 'appended', elements ); // 在最后添加元素
$grid.masonry( 'prepended', elements ); // 在最前添加元素
$grid.masonry( 'addItems', elements ); // 添加元素，但不布局
$grid.masonry( 'remove', elements ); // 删除元素
全部事件
// jQuery方式
var msnry = $grid.masonry( 'on', eventName, listener );
var msnry = $grid.masonry( 'off', eventName, listener );
var msnry = $grid.masonry( 'once', eventName, listener );
// vanilla方式
msnry.on( eventName, listener );
msnry.off( eventName, listener );
msnry.once( eventName, listener );
// jQuery,布局完成事件和移除完成事件
$grid.on( 'layoutComplete', function( event, items ) {
console.log( items.length );
});
$grid.on( 'removeComplete', function( event, removedItems ) {...} )
// vanilla，同上
msnry.on( 'layoutComplete', function( event, items ) {
console.log( items.length );
});
msnry.on( 'removeComplete', function( event, removedItems ) {...} )
Utilties
$grid.masonry('reloadItems'); // 重新载入元素，适用Angular和React被改变DOM元素后
$grid.masonry('destroy'); // 移除Masonry,元素返回初试化前状态
var elems = $grid.masonry('getItemElements'); // 返回网格元素
var msnry = $('.grid').data('masonry'); // 返回Masonry实例
var msnry = Masonry.data( $('.grid')[0] ); // 根据网格，返回Masonry实例
