所謂的瀑布流效果就正如輕圖床首頁效果那樣,多個內容相近的欄目緊密排列,盡量使到欄目間的間隙最小(即流體布局),並且隨著頁面捲軸向下滾動,新的資料會追加至當前頁面的尾部直到所有資料載入完畢(滾動觸發的 Ajax 翻頁)。
瀑布流觸發分頁
這裡說一下思路,雖然下面的執行個體中不能全都用到:
1.當進入螢幕時,判斷內容是否為空白,如果不為空白,開始初始化資料。
2.當往螢幕下拉時,判斷資料的最底部與螢幕高度+滾動的高度的大小。如果最底部小於上面兩者之和,重新請求介面,即載入資料。
3.當遇到資料超過某個頁數時,停止載入或者用分頁的形式顯示,點擊再顯示內容。
var intf_url="http://jb51.net/intf";var pathUrl = "http://jb51.net/";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":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅","website":"jb51.net","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
複製代碼 代碼如下:
#page_loading {display: none; background: #111111; opacity: 0.7; height: 60px; width: 220px; padding: 10px; position: absolute; bottom: -50px; left: 330px; }
下面是完整的 Ajax 翻頁代碼
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); } }});