jquery.masonry + jquery.infinitescroll 實現瀑布流

時間 2019-12-13

標籤 jquery.masonry jquery masonry jquery.infinitescroll infinitescroll 實現瀑布欄目 JQuery 简体版

原文原文鏈接

瀑布流佈局效果不錯，國內大大小小的瀑布流佈局的網站都不少了，好比美麗說、花瓣、歐葉拉等，關於瀑布流佈局的資料打開能夠本身百度下，這裏介紹兩個jquey插件實現瀑布流佈局和動態加載數據（分頁加載）。javascript

1、jquery.masonry，目前佈局流行的瀑布流插件有不少，官網地址：http://masonry.desandro.com，詳細的你們能夠去官網看，只要簡單幾句js代碼便可實現瀑布流佈局了，代碼以下：html

 
         $( 
         '.wrapper:eq(1)' 
         ).masonry({ 
        
         itemSelector:  
         '.wfc' 
         , 
        
         gutterWidth: 15, 
        
         columnWidth: 222, 
        
         isFitWidth:  
         true 
        
         });

這裏介紹下核心的參數，其餘能夠到官網查看；java

itemSelector    class選擇器,默認'.item'，這個表示每一個塊的選擇器
columnWidth    一列的寬度
isAnimated    使用jquery的佈局變化,默認true
animationOptions    animate屬性漸變效果(Object { queue: false, duration: 500 })
gutterWidth    列的間隙 Integer
isFitWidth 自適應瀏覽器寬度Boolean
isResizableL    是否可調整大小 Boolean
isRTL    使用從右到左的佈局 Booleanjquery

二、jquery.infinitescroll，有了瀑布流佈局，咱們還須要一個動態加載的功能，也就是瀏覽器滾動條滾動到底部的時候，須要動態加載數據，這裏介紹使用分頁的方式加載數據，插件名稱爲jquery.infinitescroll，官網地址爲：http://www.infinite-scroll.com，詳細說明能夠到官網查看，這裏介紹他的一些核心的參數json

itemSelector class選擇器,默認'div.post'，這個表示上面介紹的瀑布流的塊的選擇器
nextSelector 表示分頁中下一頁的選擇器，默認爲div.navigation a:first
navSelector 表示分頁導航的選擇器，分頁導航會被隱藏
extraScrollPx 滾動條距離底部多少像素的時候開始加載，默認150
dataType 表示動態加載返回數據的格式，默認html
template 表示返回json時，用來生成瀑布流塊html代碼的模板方法，若是返回是json，那麼必須指定這個參數，不然會報錯

瀏覽器

通常的代碼以下：app

 
         $( 
         '#waterfall' 
         ).infinitescroll({ 
        
         navSelector:  
         "#navigation" 
         ,  
         //導航的選擇器，會被隱藏 
        
         nextSelector:  
         "#navigation a" 
         ,  
         //包含下一頁連接的選擇器 
        
         itemSelector:  
         ".wfc" 
         ,  
         //你將要取回的選項(內容塊) 
        
         debug:  
         true 
         ,  
         //啓用調試信息 
        
         animate:  
         true 
         ,  
         //當有新數據加載進來的時候，頁面是否有動畫效果，默認沒有 
        
         extraScrollPx: 150,  
         //滾動條距離底部多少像素的時候開始加載，默認150 
        
         bufferPx: 40,  
         //載入信息的顯示時間，時間越大，載入信息顯示時間越短 
        
         errorCallback:  
         function 
         () { 
        
         alert( 
         'error' 
         ); 
        
         },  
         //當出錯的時候，好比404頁面的時候執行的函數 
        
         localMode:  
         true 
         ,  
         //是否容許載入具備相同函數的頁面，默認爲false 
        
         dataType:  
         'html' 
         , 
         //能夠是json 
        
         //                template: function(data) { 
        
         //                    //data表示服務端返回的json格式數據，這裏須要把data轉換成瀑布流塊的html格式，而後返回給回到函數 
        
         //                    return ''; 
        
         //                }, 
        
         loading: { 
        
         msgText:  
         "加載中..." 
         , 
        
         finishedMsg:  
         '沒有新數據了...' 
         , 
        
         selector:  
         '.loading'  
         // 顯示loading信息的div 
        
         } 
        
         },  
         function 
         (newElems) { 
        
         //程序執行完的回調函數 
        
         var  
         $newElems = $(newElems); 
        
         $( 
         '.wrapper:eq(1)' 
         ).masonry( 
         'appended' 
         , $newElems); 
        
         });

對於jquery.infinitescroll這個插件，網上不少介紹包括官網也有，可是都不是很詳細，這裏說明下需注意的地方：函數

一、分頁導航html格式問題，並非任意的html均可以的，必須有必定的格式，具體能夠看插件的源碼，格式如：page.aspx?page=1或者page/2/，還有其餘格式請看源碼；每次加載前會數字會遞增1，後臺能夠用Request["page"]獲取參數；佈局

二、若是要json數據，那麼必須指定dataType參數爲json，並設置template模板方法，該方法接收一個json數據，而後把json替換成瀑布流的html就能夠了；post

三、數據返回後，須要從新調用瀑布流插件從新佈局，query.infinitescroll在數據返回後又一個回掉，格式爲：$('#content').infinitescroll({},function(newElems){//newElems表示返回的數據，若是是json的話就是template的返回值})；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。