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