Masonry是最盛行的瀑布流插件之一，设置简朴，功能强大，在Github上收成了1w+ stars。假如你想运用瀑布流提拔网站体验，Masonry将是不错的挑选。

瀑布流，又称瀑布流式规划。是比较盛行的一种网站页面规划，视觉表现为良莠不齐的多栏规划，跟着页面转动条向下转动，这类规划还会不停加载数据块并附加至当前尾部。最早采纳此规划的网站是Pinterest，逐步在国内盛行开来。国内大多数清新站基础为这类作风,像花瓣网、蘑菇街、优美说等。

须要注重的是，假如你须要加载图片，Masonry不会在图片加载完后从新规划，这可能会影响你的规划结果，发起合营运用imagesloaded插件。
imagesloaded设置与运用

装置体式格局

Bower

bower install masonry --save

Npm

npm install masonry-layout

加载

<script src="/path/to/masonry.pkgd.min.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'
});

<!-- HTML体式格局，不引荐 -->
<div class="grid" data-masonry='{ "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实例