瀑布流插件Masonry的配置和使用

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實例