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

waterc 發布于2019-08-22 10:42 / 1472人閱讀

摘要：是最流行的瀑布流插件之一，配置簡單，功能強大，在上收獲了。如果你想使用瀑布流提升網站體驗，將是不錯的選擇。瀑布流，又稱瀑布流式布局。需要注意的是，如果你需要加載圖片，不會在圖片加載完后重新布局，這可能會影響你的布局效果，建議配合使用插件。

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

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

需要注意的是，如果你需要加載圖片，Masonry不會在圖片加載完后重新布局，這可能會影響你的布局效果，建議配合使用imagesloaded插件。
imagesloaded配置與使用

安裝方式

Bower

bower install masonry --save

Npm

npm install masonry-layout

加載

html代碼

...

配置方式

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

云服務器 GPU云服務器瀑布流瀑布流方式使用jquery masonry gridview瀑布流

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91123.html

瀑布流插件Masonry中文文檔【翻譯】

摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時會導致元素的重疊，可以解決這個問題。布局組件尺寸尺寸配置項和可以可以設置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。本位為Masonry官方文檔翻譯，原始鏈接安裝Install 下載下載壓縮或未壓縮的masonry masonry.pkgd.min.js （壓縮...

soasme 2019-08-22 15:18 評論0 收藏0
推薦JS插件：imagesLoaded，監測圖片加載情況并提供相應的事件（加載成功/失敗）

摘要：為了保證在拿到圖片高度，也即圖片加載完成后再進行排列，我根據的推薦，選用了這一款插件。另外，在做一些圖片加載效果的時候也可以用到，比如說圖片未加載完成之前放個圖，加載失敗時放個錯誤提示什么的都很方便呢。慣例，首先貼上imagesLoaded的官方網址：http://imagesloaded.desandro.com/ 第一次知道imagesLoaded這個插件是在做瀑布流布局時，當時...

atinosun 2019-08-22 10:59 評論0 收藏0
avalon與masonry的結合

摘要：相關組件版本最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測試的結果很令人沮喪，依然沒有控制節點的位置，所以應該不是這個問題。相關組件版本：avalon 1.3.6、masonry 3.1.5 最近，在公司的項目中，要開發一個使用瀑布流的前臺，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發后臺...

Kosmos 2019-08-22 10:59 評論0 收藏0
jQuery動畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。將整個文件放至項目的任意目錄不要移動其文件結構，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。on()方法...

MkkHou 2019-08-29 16:16 評論0 收藏0
jQuery動畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。將整個文件放至項目的任意目錄不要移動其文件結構，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。on()方法...

ssshooter 2019-08-23 10:40 評論0 收藏0