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


最近瀑布流布局非常流行,國內大大小小的瀑布流布局的網站都很多了,比如美麗說、蘑菇街、花瓣等,關於瀑布流布局的資料打開可以百度自己看了,這里介紹兩個jquey插件實現瀑布流布局和動態加載數據(分頁加載)。

1jquery.masonry,目前布局流行的瀑布流插件有很多,http://www.csswang.com/resource/2261.html,這里有很多介紹,這個插件算是比較流行的一款吧,文檔也布局詳細,官網地址:http://masonry.desandro.com,詳細的大家可以去官網看,只要簡單幾句js代碼即可實現瀑布流布局了,代碼如下:

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

這里介紹下核心的參數,其他可以到官網查看;

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

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

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

一般的代碼如下:

$('#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這個插件,網上很多介紹包括官網也有,但是都不是很詳細,這里說明下需注意的地方:

1、分頁導航html格式問題,並不是任意的html都可以的,必須有一定的格式,具體可以看插件的源碼,格式如:page.aspx?page=1或者page/2/,還有其他格式請看源碼;每次加載前會數字會遞增1,后台可以用Request["page"]獲取參數;

2、如果要json數據,那么必須指定dataType參數為json,並設置template模板方法,該方法接收一個json數據,然后把json替換成瀑布流的html就可以了;

3、數據返回后,需要重新調用瀑布流插件重新布局,query.infinitescroll在數據返回后又一個回掉,格式為:$('#content').infinitescroll({},function(newElems){//newElems表示返回的數據,如果是json的話就是template的返回值});

 

Demo下載

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM