最近瀑布流布局非常流行，國內大大小小的瀑布流布局的網站都很多了，比如美麗說、蘑菇街、花瓣等，關於瀑布流布局的資料打開可以百度自己看了，這里介紹兩個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的返回值})；