成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

waterc / 1524人閱讀

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

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

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

需要注意的是，如果你需要加載圖片，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"
});
設(shè)置網(wǎng)格寬度 
columnWidth: 80
columnWidth: elements
columnWidth: ".grid-sizer"
.grid-item { width: 20%; }
全部屬性配置 
$(".grid").masonry({
  columnWidth: 200,
  itemSelector: ".grid-item"，     // 要布局的網(wǎng)格元素
  gutter：10,                      // 網(wǎng)格間水平方向邊距，垂直方向邊距使用css的margin-bottom設(shè)置
  percentPosition：true,           // 使用columnWidth對應(yīng)元素的百分比尺寸
  stamp:".grid-stamp",             // 網(wǎng)格中的固定元素，不會因重新布局改變位置，移動元素填充到固定元素下方
  fitWidth: true,                  // 設(shè)置網(wǎng)格容器寬度等于網(wǎng)格寬度，這樣配合css的auto margin實現(xiàn)居中顯示
  originLeft: true,                // 默認(rèn)true網(wǎng)格左對齊，設(shè)為false變?yōu)橛覍R
  originTop: true,                 // 默認(rèn)true網(wǎng)格對齊頂部，設(shè)為false對齊底部
  containerStyle: { position: "relative" },     // 設(shè)置容器樣式
  transitionDuration: "0.8s",      // 改變位置或變?yōu)轱@示后，重布局變換的持續(xù)時間，時間格式為css的時間格式
  stagger: "0.03s",                // 重布局時網(wǎng)格并不是一起變換的，排在后面的網(wǎng)格比前一個延遲開始，該項設(shè)置延遲時間  
  resize： false,                  // 改變窗口大小將不會影響布局
  initLayout: true,                // 初始化布局，設(shè)未true可手動初試化布局
});
方法調(diào)用方式 
// 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 );                    // 修改設(shè)置，再重新布局
$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,元素返回初試化前狀態(tài)
var elems = $grid.masonry("getItemElements");     // 返回網(wǎng)格元素
var msnry = $(".grid").data("masonry");           // 返回Masonry實例
var msnry = Masonry.data( $(".grid")[0] );        // 根據(jù)網(wǎng)格，返回Masonry實例

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/91123.html

相關(guān)文章

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

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

    soasme 評論0 收藏0

  • 推薦JS插件：imagesLoaded，監(jiān)測圖片加載情況并提供相應(yīng)的事件（加載成功/失?。?/b>

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

    atinosun 評論0 收藏0

  • avalon與masonry的結(jié)合

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

    Kosmos 評論0 收藏0

  • jQuery動畫效果、jQuery插件使用

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

    MkkHou 評論0 收藏0

  • jQuery動畫效果、jQuery插件使用

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

    ssshooter 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<