成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

waterc / 1614人閱讀

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

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

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

需要注意的是，如果你需要加載圖片，Masonry不會(huì)在圖片加載完后重新布局，這可能會(huì)影響你的布局效果，建議配合使用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對(duì)應(yīng)元素的百分比尺寸
  stamp:".grid-stamp",             // 網(wǎng)格中的固定元素，不會(huì)因重新布局改變位置，移動(dòng)元素填充到固定元素下方
  fitWidth: true,                  // 設(shè)置網(wǎng)格容器寬度等于網(wǎng)格寬度，這樣配合css的auto margin實(shí)現(xiàn)居中顯示
  originLeft: true,                // 默認(rèn)true網(wǎng)格左對(duì)齊，設(shè)為false變?yōu)橛覍?duì)齊
  originTop: true,                 // 默認(rèn)true網(wǎng)格對(duì)齊頂部，設(shè)為false對(duì)齊底部
  containerStyle: { position: "relative" },     // 設(shè)置容器樣式
  transitionDuration: "0.8s",      // 改變位置或變?yōu)轱@示后，重布局變換的持續(xù)時(shí)間，時(shí)間格式為css的時(shí)間格式
  stagger: "0.03s",                // 重布局時(shí)網(wǎng)格并不是一起變換的，排在后面的網(wǎng)格比前一個(gè)延遲開始，該項(xiàng)設(shè)置延遲時(shí)間  
  resize： false,                  // 改變窗口大小將不會(huì)影響布局
  initLayout: true,                // 初始化布局，設(shè)未true可手動(dòng)初試化布局
});


方法調(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實(shí)例
var msnry = Masonry.data( $(".grid")[0] );        // 根據(jù)網(wǎng)格，返回Masonry實(shí)例


           
               
                                           
                       
                 

            
                     
             
               

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

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/91123.html

               

                      
               
              

              

                
相關(guān)文章

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

本位為Masonry官方文檔翻譯，原始鏈接
安裝Install
下載
下載壓縮或未壓縮的masonry

masonry.pkgd.min.js （壓縮...
    
                                                   
                          
    
                                
    
                                    soasme
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    推薦JS插件：imagesLoaded，監(jiān)測(cè)圖片加載情況并提供相應(yīng)的事件（加載成功/失敗）
    
                                                     
    摘要：為了保證在拿到圖片高度，也即圖片加載完成后再進(jìn)行排列，我根據(jù)的推薦，選用了這一款插件。另外，在做一些圖片加載效果的時(shí)候也可以用到，比如說圖片未加載完成之前放個(gè)圖，加載失敗時(shí)放個(gè)錯(cuò)誤提示什么的都很方便呢。

慣例，首先貼上imagesLoaded的官方網(wǎng)址：http://imagesloaded.desandro.com/
第一次知道imagesLoaded這個(gè)插件是在做瀑布流布局時(shí)，當(dāng)時(shí)...
    
                                                   
                          
    
                                
    
                                    atinosun
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    avalon與masonry的結(jié)合
    
                                                     
    摘要：相關(guān)組件版本最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得最成熟，所以就選用了它。測(cè)試的結(jié)果很令人沮喪，依然沒有控制節(jié)點(diǎn)的位置，所以應(yīng)該不是這個(gè)問題。

相關(guān)組件版本：avalon 1.3.6、masonry 3.1.5
最近，在公司的項(xiàng)目中，要開發(fā)一個(gè)使用瀑布流的前臺(tái)，衡量了各種解決方案后，還是覺得masonry最成熟，所以就選用了它。而在之前開發(fā)后臺(tái)...
    
                                                   
                          
    
                                
    
                                    Kosmos
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    jQuery動(dòng)畫效果、jQuery插件使用
    
                                                     
    摘要：一事件的綁定與解綁的簡(jiǎn)單綁定事件新版本使用為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。將整個(gè)文件放至項(xiàng)目的任意目錄不要移動(dòng)其文件結(jié)構(gòu)，它們具有完整的依賴體系。

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

一、事件的綁定與解綁
1.1 jQuery的簡(jiǎn)單綁定
1.1.1 on(events,fn)事件(新版本使用)
為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法...
    
                                                   
                          
    
                                
    
                                    ssshooter
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<