所謂的瀑布流效果就正如輕圖床首頁效果那樣，多個內容相近的欄目緊密排列，盡量使到欄目間的間隙最小（即流體布局），并且隨著頁面滾動條向下滾動，新的數據會追加至當前頁面的尾部直到所有數據加載完畢（滾動觸發的 Ajax 翻頁）。
瀑布流觸發分頁
這里說一下思路，雖然下面的實例中不能全都用到：
1.當進入屏幕時，判斷內容是否為空，如果不為空，開始初始化數據。
2.當往屏幕下拉時，判斷數據的最底部與屏幕高度+滾動的高度的大小。如果最底部小于上面兩者之和，重新請求接口，即加載數據。
3.當遇到數據超過某個頁數時，停止加載或者用分頁的形式顯示，點擊再顯示內容。
var intf_url="http://VeVB.COm/intf";var pathUrl = "http://VeVB.COm/";var page=1;var isLoadRB=false; var ul_select=$("#fansList");var btn_more=$("#loading");if(ul_select.length <1) return ;var is_more =true;//跨域請求接口function loadjs(src,callback){ var js= document.createElement('script'); js.src = src; js.onreadystatechange = js.onload =function(){ if(!js.readyState || js.readyState=='loaded' || js.readyState=='complete'){ if(callback){callback()||callback}; }};js.charset="utf-8";document.getElementsByTagName('head')[0].appendChild(js);}//回調函數function fill(data){if(data.pageCount==data.pageNo){ is_more=false;//如果數據全部加載完畢，取消加載 $("#loading").html("加載完畢");}}//解析接口function queryIntf(){var url=page==1?intf_url+".json":intf_url+"_page"+page+".json";loadJs(url,callback);}function callback(){page++;}/*判斷是否要加載接口*/function needtoloadRB(){ var btn_top=btn_more.offset().top; var window_height=$(window).height(); var scroll_Top=$(window).scrollTop(); return btn_top<scroll_Top+window_height?true:false;}$(window).scroll(function(){ var _needload=needtoloadRB(); if(_needload && isLoadRB==false &&is_more){isLoadRB=true;queryintf();}})window.onload = function(){ queryintf(); }以上就是比較簡單的隨著下拉內容不斷加載的思路代碼。
JSON格式類似于（如果是動態接口，可以通過callback函數，則這里不用加fill()）：
fill({"fans":[{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"VeVB.COm","youzhi":"2.5","time":"3分鐘前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20});原來靜態也可以做接口回調。通過靜態處理，則大大緩解了服務器壓力和加速生成內容，是大流量網站必備的處理方式。
jQuery的ajax方法實現分頁觸發瀑布流
1.通過 Ajax 的方式獲取下一頁的內容
我們需要網頁中具有如下 HTML 結構的導航， next_link 為下一頁的 url。
<div id="page_nav"> <a href="next_link">下一頁</a></div>
相應的 css
#page_nav {clear: both; text-align: center; }以下這段代碼為通過 Ajax 的方式獲取下一頁的內容，并追加到當前內容的末尾。
nextHref = $("#next_page a").attr("href");// 給瀏覽器窗口綁定 scroll 事件$(window).bind("scroll",function(){ // 判斷窗口的滾動條是否接近頁面底部 if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // 判斷下一頁鏈接是否為空 if( nextHref != undefined ) { // Ajax 翻頁 $.ajax( { url: $("#page_nav a").attr("href"), type: "POST", success: function(data) { result = $(data).find("#thumbs .imgbox"); nextHref = $(data).find("#page_nav a").attr("href"); $("#page_nav a").attr("href", nextHref); $("#thumbs").append(result); } }); } else { $("#page_nav").remove(); } }});2.對追加的內容進行流體布局
熟悉 jQuery 的童鞋應該會了解 js 對于通過 Ajax 方式插入到頁面中的元素并不起作用，但在這里并不需要作出如使用 live() 等處理，因為 Masonry 已經在內部作出類似的處理并且默認起效，因此只需在 Ajax 成功執行后的回調函數中調用 masonry() 方法即可。
$newElems = $result;$newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true );});3.對 Ajax 翻頁過程作出修飾
在上面的過程中已經有完整的瀑布流布局，但是翻頁過程中并沒有任何提示，而且直接插入多張圖片可能會影響用戶體驗，因此需要對翻頁過程作出一些修飾，下面給出完整代碼。
這里需要增加一個如下的元素，用于提示正在加載新內容或提示已到了最后一頁。
<div id="page_loading"> <span>給力加載中……</span></div>
相應的 css
nextHref = $("#next_page a").attr("href");// 給瀏覽器窗口綁定 scroll 事件$(window).bind("scroll",function(){ // 判斷窗口的滾動條是否接近頁面底部 if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) { // 判斷下一頁鏈接是否為空 if( nextHref != undefined ) { // 顯示正在加載模塊 $("#page_loading").show("slow"); // Ajax 翻頁 $.ajax( { url: $("#page_nav a").attr("href"), type: "POST", success: function(data) { result = $(data).find("#thumbs .imgbox"); nextHref = $(data).find("#page_nav a").attr("href"); $("#page_nav a").attr("href", nextHref); $("#thumbs").append(result); // 把新的內容設置為透明 $newElems = result.css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true ); // 漸顯新的內容 $newElems.animate({ opacity: 1 }); // 隱藏正在加載模塊 $("#page_loading").hide("slow"); }); } }); } else { $("#page_loading span").text("木有了噢，最后一頁了！"); $("#page_loading").show("fast"); setTimeout("$('#page_loading').hide()",1000); setTimeout("$('#page_loading').remove()",1100); } }});新聞熱點
疑難解答
