Masonry--「瀑布流」佈局（圖片較多，推薦在WIFI下查看）

時間 2019-11-08

原文原文鏈接

Masonry.js是一個以「瀑布流」佈局呈現網頁元素的JS庫，它可使多個不規則寬高的元素以恰當的順序排列，增長美觀度。css

基本的使用方法以下（如下內容翻譯自masonry官網： https://masonry.desandro.com/）：html

HTML：

1.導入masonry.js庫jquery

2.以兩層結構包裹將要使用這種佈局的元素，結構以下：ajax

1 <div class="grid">
2   <div class="grid-item">...</div>
3   <div class="grid-item grid-item--width2">...</div>
4   <div class="grid-item">...</div>
5   ...
6 </div>

在.grid-item裏面分別放置顯示的內容元素。數組

CSS:

item元素的尺寸設置所有在CSS內進行，如：app

1 .grid-item { width: 200px; }
2 .grid-item--width2 { width: 400px; }

初始化：

提供三種初始化的方式，可按任意選擇框架

1.以Jquery插件的方式函數

1 $('.grid').masonry({
2   itemSelector: '.grid-item',
3   columnWidth: 200
4 });

對選中元素應用masonry方法，並設置初始化參數（參數爲對象格式）。佈局

2.以原生JS方式初始化：動畫

 1 var elem = document.querySelector('.grid');
 2 var msnry = new Masonry( elem, {
 3 　//屬性設置
 4   itemSelector: '.grid-item',
 5   columnWidth: 200
 6 });
 7 
 8 var msnry = new Masonry( '.grid', {
 9   //屬性設置
10 });

第一個參數爲外層容器元素（能夠是一個原生DOM對象；或者是能惟一肯定該元素的，以「’選擇器」語法表示的字符串），第二個參數是初始化配置對象。

3.直接在HTML中初始化：

<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'>

在自定義屬性data-masonry裏直接初始化配置對象。選擇這種方式的話，就無需另寫JS了。

注意：配置對象必須是有效的JSON格式對象，鍵名必須使用雙引號包圍，而所以 data-masonry的值須要使用單引號。

另外，在Masonry v3中初始化是對外層容器元素添加js-masonry類，並在data-masonry-options中進行的初始化，Masonry v4可以向下兼容這種寫法。

佈局

全部尺寸與樣式設置都由CSS完成，如：

1 .grid-item {
2   float: left;
3   width: 80px;
4   height: 60px;
5   border: 2px solid hsla(0, 0%, 0%, 0.5);
6 }
7 
8 .grid-item--width2 { width: 160px; }
9 .grid-item--height2 { height: 140px; }

響應式佈局

item的尺寸能夠設置爲百分比來知足響應式設計的需求，如：

1 <div class="grid">
2   <!-- width of .grid-sizer used for columnWidth -->
3   <div class="grid-sizer"></div>
4   <div class="grid-item"></div>
5   <div class="grid-item grid-item--width2"></div>
6   ...
7 </div>

1 /* 元素寬度爲佈局空間寬度的20% */
2 .grid-sizer,
3 .grid-item { width: 20%; }
4 /* 40% */
5 .grid-item--width2 { width: 40%; }

1 $('.grid').masonry({
2   // 將itemSelector設爲.grid-item，這樣.grid-sizer就不會被做爲item的寬度使用
3   itemSelector: '.grid-item',
4   // 直接以類來設置屬性
5   columnWidth: '.grid-sizer',
6   percentPosition: true
7 })

imagesLoaded

未加載徹底的圖片可能會脫離Masonry的佈局，並致使item元素髮生重疊，而使用imagesLoaded能夠解決這個問題。 imagesLoaded是一款獨立的JS腳本，你能夠在這裏看到更多與imagesloaded相關的信息。

初始化Masonry，而後在每張圖片加載完成後觸發layout，如：

1 // 初始化 Masonry
2 var $grid = $('.grid').masonry({
3   // 屬性設置...
4 });
5 // 每張圖片加載完成後觸發layout
6 $grid.imagesLoaded().progress( function() {
7   $grid.masonry('layout');
8 });

或者，你能夠在全部圖片加載完成後初始化Masonry，如：

1 var $grid = $('.grid').imagesLoaded( function() {
2   // 在全部圖片加載完成後初始化Masonry
3   $grid.masonry({
4     // 屬性設置...
5   });
6 });

屬性

全部屬性都是可選的，但建議每次都設置columnWidth和itemSelector。

佈局屬性

gutter

元素水平方向的間隙，如：

gutter: 10

效果圖：

若想設置垂直方向上的間隙，請使用CSS margin：

1 .grid-item {
2   margin-bottom: 10px;
3 }

一樣的，gutter也能夠設置爲百分比，以知足響應式設計，如：

1 <div class="grid">
2   <div class="grid-sizer"></div>
3   <div class="gutter-sizer"></div>
4   <div class="grid-item"></div>
5   <div class="grid-item grid-item--width2"></div>
6   ...
7 </div>

1 .grid-sizer,
2 .grid-item { width: 22%; }
3 
4 .gutter-sizer { width: 4%; }
5 
6 .grid-item--width2 { width: 48%; }

1 columnWidth: '.grid-sizer',
2 gutter: '.gutter-sizer',
3 itemSelector: '.grid-item',
4 percentPosition: true

效果如圖：

horizontalOrder

規定元素是否始終從左到右排列，若爲false，可能出現意外的效果，如：

上圖中，元素7和8優先填滿垂直方向控件更大（即該列已有元素的總高度最下。固然，總高度相同，仍是按規定的水平順序排列），而不是優先出如今元素9的位置。

percentPosition

規定將元素定位設成百分比。設爲true後，元素沒必要再調整自身寬度來適應容器的尺寸變化。

stamp

規定哪些元素在佈局中是固定的，只能在初始化Masonry實例時可使用stamp來固定元素。其餘元素會一次排列在stamp元素的下（後）面，如：

1 <div class="grid">
2   <div class="stamp stamp1"></div>
3   <div class="stamp stamp2"></div>
4   <div class="grid-item"></div>
5   <div class="grid-item"></div>
6   ....
7 </div>

 1 .stamp {
 2   position: absolute;
 3   background: orange;
 4   border: 4px dotted black;
 5 }
 6 .stamp1 {
 7   left: 30%;
 8   top: 10px;
 9   width: 20%;
10   height: 100px;
11 }
12 .stamp2 {
13   right: 10%;
14   top: 20px;
15   width: 70%;
16   height: 30px;
17 }

itemSelector: '.grid-item',

stamp: '.stamp

效果如圖：

fitWidth

規定容器元素自動調整自身寬度爲item元素列數*列寬，從而，使得容器元素可以設置爲在其父元素中水平居中顯示，如：

注意：fitWidth不能與百分比一塊兒使用，不論columnWidth仍是item元素的寬度，都必須使用固定值，不然，容器元素和item元素的寬度會在一端坍縮。

在Masonry v3中的等價屬性是isFitwIdth，且isFitWidth在v4中仍然可使用。

originLeft

規定元素水平方向的排列順序，默認爲true，即從左到右排列；設爲false，可使元素從右向左排列，如圖：

在Masonry v3中的等價屬性爲isOriginLeft，在v4中仍然可以使用。

originTop

規定元素垂直方向的排列順序，默認爲true，即從上到下排列；設爲false，可使元素從下向上排列，如圖：

在Masonry v3中的等價屬性爲isOriginTop ，在v4中仍然可使用。

設定參數

containerStyle

將containerStyle設爲null，可使設置在容器元素上的樣式所有失效。

transitionDuration

延長item元素從原來的位置到達新位置的過渡時間，默認爲0.4秒，使用css時間格式設置，如：

1 // 快速過渡
2 transitionDuration: '0.2s'
3 
4 // 慢速過渡
5 transitionDuration: '0.8s'
6 
7 // 無過渡效果，當即移動到新位置
8 transitionDuration: 0

stagger

規定元素位置改變時，每次只移動一個元素。可使用CSS時間格式或一個數字（以毫秒計），如圖：

resize

當窗口尺寸變化時，調整元素的尺寸和位置，默認爲true。

在v3中的等價屬性爲isResizeBound，在v4中仍然可使用。>

initLayout

使佈局初始化，默認爲true，設爲false能夠暫停佈局的初始化，從而方便在初始化前向Masonry添加事件或方法，如：

 1 var $grid = $('.grid').masonry({
 2   // 禁止佈局初始化
 3   initLayout: false,
 4   //...
 5 });
 6 // 綁定事件處理器
 7 $grid.masonry( 'on', 'layoutComplete', function() {
 8   console.log('layout is complete');
 9 });
10 // 觸發佈局初始化
11 $grid.masonry();

在v3中的等價屬性爲isInitLayout ，在v4中仍然可使用。

方法

使用jQuery時，方法遵循jQuery UI模式.masonry('methodName' /* arguments */ )，如：

1 $grid.masonry()
2   .append( elem )
3   .masonry( 'appended', elem )
4   // 佈局
5   .masonry();

注意： jQuery的鏈式語法將在帶有返回值的方法出中斷（如：getItemElements， getItem，on，off）。

在使用原生JS時，方法的使用相似 masonry.methodName( /* arguments */ )，與jQuery不一樣，此時不能使用鏈式語法，如：

1 var msnry = new Masonry( '.grid', {...});
2 gridElement.appendChild( elem );
3 msnry.appended( elem );
4 msnry.layout();

佈局相關

layout / .masonry()

對元素按規則進行排列，layout在元素尺寸發生變化，且全部元素、須要從新排列是很是有用。

layoutItems

對指定元素執行排列

1 // jQuery
2 $grid.masonry( 'layoutItems', items, isStill );
3 // 原生JS
4 msnry.layoutItems( items, isStill );

items Masonry.Items組成的數組
isStill Boolean 禁止過渡效果

stamp

固定指定元素，其餘item元素圍繞stamp元素排列

1 // jQuery
2 $grid.masonry( 'stamp', elements );
3 // 原生JS
4 msnry.stamp( elements );

elements 原生元素，jQuery對象，節點列表或者原生元素數組

unstamp

取消元素的固定效果，其餘元素將再也不圍繞stamp元素排列

添加和移除item元素

appended

添加新元素到容器末尾，並對全部受影響元素進行從新排列

1 // jQuery
2 $grid.masonry( 'appended', elements );
3 // 原生JS
4 msnry.appended( elements );

elements 原生元素，jQuery對象，節點列表或者原生元素數組

栗子：

1 $('.append-button').on( 'click', function() {
2   // 建立新item元素
3   var $items = $('<div class="grid-item">...</div>');
4   // 將新元素添加到容器元素
5   $grid.append( $items )
6     // 對新元素和受影響的元素進行從新排列
7     .masonry( 'appended', $items );
8 });

在jQuery中能夠直接用HTML字符串建立元素對象，但原生JS並不支持。當使用jQuery的AJAX方法（如：$get()，$ajax()等）時，記得將內容包裝成jQuery對象後。再執行添加操做，如：

 1 // 這並不能起做用
 2 $.get( 'page2', function( content ) {
 3   // HTML字符串雖然可以被添加，但item元素沒法添加到Masonry
 4   $grid.append( content ).masonry( 'appended', content );
 5 });
 6 
 7 // 這是正確的用法
 8 $.get( 'page2', function( content ) {
 9   // 將內容包裹在jQuery對象中
10   var $content = $( content );
11   // 添加jQuery對象到Masonry實例
12   $grid.append( $content ).masonry( 'appended', $content );
13 });

prepended

添加新元素到容器元素的開頭，並對全部受影響元素執行重排

1 // jQuery
2 $grid.masonry( 'prepended', elements );
3 // 原生JS
4 msnry.prepended( elements );

elements 原生元素，jQuery對象，節點列表或者原生元素數組

栗子：

1 $('.prepend-button').on( 'click', function() {
2   // 建立新的item元素
3   var $items = $('<div class="grid-item">...</div>');
4   // 添加新元素到容器元素開頭
5   $grid.prepend( $items )
6     // 添加新元素到Masonry實例並對全部受影響元素執行重排
7     .masonry( 'prepended', $items );
8 });

addItems

添加新元素到Masonry實例，但不執行重排

1 // jQuery
2 $grid.masonry( 'addItems', elements );
3 // 原生JS
4 msnry.addItems( elements );

elements 原生元素，jQuery對象，節點列表或者原生元素數組

remove

從Masonry和DOM中移除指定元素

1 // jQuery
2 $grid.masonry( 'remove', elements );
3 // 原生JS
4 msnry.remove( elements );

elements 原生元素，jQuery對象，節點列表或者原生元素數組

一個栗子：

1 $grid.on( 'click', '.grid-item', function() {
2   // 移除被點擊的item
3   $grid.masonry( 'remove', this )
4     // 對剩餘元素執行重排
5     .masonry('layout');
6 });

事件

on

添加一個Masonry事件監聽器

1 // jQuery
2 var msnry = $grid.masonry( 'on', eventName, listener );
3 // 原生JS
4 msnry.on( eventName, listener );

eventName String · Masonry事件名
listener 監聽器方法

once

添加一個只執行一次的事件監聽器

1 // jQuery
2 var msnry = $grid.masonry( 'once', eventName, listener );
3 // 原生JS
4 msnry.once( eventName, listener );

eventName String · Masonry事件名
listener 監聽器方法

Utilities

reloadItems

Recollects all item elements.（應該是元素內容變化後，從新收集並整理元素的意思）

對於像Angular和React之類的框架，將改變應用到DOM和Masonry，使用reloadeItems可能更有用。

1 // jQuery
2 $grid.masonry('reloadItems');
3 // 原生JS
4 msnry.reloadItems();

destroy

徹底移除Masonry方法，執行後元素會恢復未應用「瀑布流」佈局的狀態

1 // jQuery
2 $grid.masonry('destroy');
3 // 原生JS
4 msnry.destroy();

一個栗子：

 1 var masonryOptions = {
 2   itemSelector: '.grid-item',
 3   columnWidth: 80
 4 };
 5 // 初始化Masonry
 6 var $grid = $('.grid').masonry( masonryOptions );
 7 var isActive = true;
 8 
 9 $('.toggle-button').on( 'click', function() {
10   if ( isActive ) {
11     $grid.masonry('destroy'); // destroy
12   } else {
13     $grid.masonry( masonryOptions ); // 從新初始化
14   }
15   // 設置標記
16   isActive = !isActive;
17 });

getItemElements

返回一個item元素組成的數組

1 // jQuery
2 var elems = $grid.masonry('getItemElements');
3 // 原生JS
4 var elems = msnry.getItemElements();

jQuery.fn.data('masonry')

由一個jQuery對象獲得一個Masonry實例。使用Masonry實例能夠很方便地獲取到Masonry屬性

1 var msnry = $('.grid').data('masonry');
2 // 獲取Masonry屬性
3 console.log( msnry.items.length + ' filtered items'  );

Masonry.data

經過原生對象獲取其Masonry實例。對於在HTML中完成Masonry實例初始化的狀況，經過Masonry.data()能夠方便地獲取到該實例。

var msnry = Masonry.data( element );

element 原生元素對象或選擇器字符串（原生格式）

獲取的例子：

 1 // jQuery
 2 // pass in the element, $element[0], not the jQuery object
 3 var msnry = Masonry.data( $('.grid')[0] );
 4 
 5 // 原生JS
 6 // 使用element
 7 var grid = document.querySelector('.grid');
 8 var msnry = Masonry.data( grid );
 9 // 使用選擇器字符串
10 var msnry = Masonry.data('.grid');

事件

事件綁定

jQuery 事件綁定

用jQuery進行事件綁定，使用.on()，.off()和.one()方法

 1 // jQuery
 2 var $grid = $('.grid').masonry({...});
 3 
 4 function onLayout() {
 5   console.log('layout done');
 6 }
 7 // 綁定事件監聽器
 8 $grid.on( 'layoutComplete', onLayout );
 9 // 解綁事件監聽器
10 $grid.off( 'layoutComplete', onLayout );
11 // 綁定只執行一次的事件監聽器
12 $grid.one( 'layoutComplete', function() {
13   console.log('layout done, just this one time');
14 });

jQuery用於充當事件監聽器的回調函數能夠接受兩個參數，第一個是event，第二個是items，而原生JS則沒有第一個參數，如：

1 // jQuery, 有event參數
2 $grid.on( 'layoutComplete', function( event, items ) {
3   console.log( items.length );
4 });
5 
6 // 原生JS, 無event參數
7 msnry.on( 'layoutComplete', function( items ) {
8   console.log( items.length );
9 });

原生JS事件綁定

用原生JS進行事件綁定，使用.on()，.off()和.once()方法

 1 // 原生JS
 2 var msnry = new Masonry( '.grid', {...});
 3 
 4 function onLayout() {
 5   console.log('layout done');
 6 }
 7 // 綁定事件監聽器
 8 msnry.on( 'layoutComplete', onLayout );
 9 // 解綁事件監聽器
10 msnry.off( 'layoutComplete', onLayout );
11 // 綁定只執行一次的事件監聽器
12 msnry.once( 'layoutComplete', function() {
13   console.log('layout done, just this one time');
14 });

Masonry events

layoutComplete

在全部元素從新排列，且過渡動畫所有完成後觸發

1 // jQuery
2 $grid.on( 'layoutComplete', function( event, laidOutItems ) {...} );
3 // 原生JS
4 msnry.on( 'layoutComplete', function( laidOutItems ) {...} );

laidOutItems Masonry.Items組成的數組· 須要執行排列的元素

一個栗子：

1 $grid.on( 'layoutComplete',
2   function( event, laidOutItems ) {3     console.log( 'Masonry layout completed on ' +
4       laidOutItems.length + ' items' );
5   }
6 );

removeComplete

當元素被移除後觸發

1 // jQuery
2 $grid.on( 'removeComplete', function( event, removedItems ) {...} );
3 // 原生JS
4 msnry.on( 'removeComplete', function( removedItems ) {...} );