Masonry是最流行的瀑布流外掛之一，配置簡單，功能強大，在Github上收穫了1.3w+ stars。如果你想使用瀑布流提升網站體驗，Masonry將是不錯的選擇。

啥是瀑布流：

是比較流行的一種網站頁面佈局，視覺表現為參差不齊的多欄佈局，隨著頁面滾動條向下滾動，這種佈局還會不斷載入資料塊並附加至當前尾部。
最早採用此佈局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格,像花瓣網、蘑菇街、美麗說等。

依賴：jQuery

如何引入：

1.cdn:<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>

html:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  ...
</div>

2種配置方案：

// jQuery方式
$('.grid').masonry({
  columnWidth: 200,
  itemSelector: '.grid-item'
});
<!-- 內嵌HTML方式，不推薦 -->
<div class="grid" data-masonry='{ "columnWidth": 200, "itemSelector": ".grid-item" }'>
 

如果是一般的瀑布流上面的簡單配置基本可以了；萬一你的是百分百佈局的話，你可以參考官網中的案例（下圖位置）；

全部配置（根據需要選擇吧）：

$('.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可手動初試化佈局
});
 

所有方法：

$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 );         // 刪除元素 

事件：

var msnry = $grid.masonry( 'on', eventName, listener );
var msnry = $grid.masonry( 'off', eventName, listener );
var msnry = $grid.masonry( 'once', eventName, listener );

$grid.on( 'layoutComplete', function( event, items ) {
  console.log( items.length );
});
$grid.on( 'removeComplete', function( event, removedItems ) {...} )