AJAX實現(xiàn)瀑布流觸發(fā)分頁與分頁觸發(fā)瀑布流的方法
所謂的瀑布流效果就正如輕圖床首頁效果那樣,多個內(nèi)容相近的欄目緊密排列,盡量使到欄目間的間隙最?。戳黧w布局),并且隨著頁面滾動條向下滾動,新的數(shù)據(jù)會追加至當(dāng)前頁面的尾部直到所有數(shù)據(jù)加載完畢(滾動觸發(fā)的 Ajax 翻頁)。
瀑布流觸發(fā)分頁
這里說一下思路,雖然下面的實例中不能全都用到:
1.當(dāng)進(jìn)入屏幕時,判斷內(nèi)容是否為空,如果不為空,開始初始化數(shù)據(jù)。
2.當(dāng)往屏幕下拉時,判斷數(shù)據(jù)的最底部與屏幕高度+滾動的高度的大小。如果最底部小于上面兩者之和,重新請求接口,即加載數(shù)據(jù)。
3.當(dāng)遇到數(shù)據(jù)超過某個頁數(shù)時,停止加載或者用分頁的形式顯示,點(diǎn)擊再顯示內(nèi)容。
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); } //回調(diào)函數(shù) function fill(data){ if(data.pageCount==data.pageNo){ is_more=false;//如果數(shù)據(jù)全部加載完畢,取消加載 $("#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(); }
以上就是比較簡單的隨著下拉內(nèi)容不斷加載的思路代碼。
JSON格式類似于(如果是動態(tài)接口,可以通過callback函數(shù),則這里不用加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 });
原來靜態(tài)也可以做接口回調(diào)。通過靜態(tài)處理,則大大緩解了服務(wù)器壓力和加速生成內(nèi)容,是大流量網(wǎng)站必備的處理方式。
jQuery的ajax方法實現(xiàn)分頁觸發(fā)瀑布流
1.通過 Ajax 的方式獲取下一頁的內(nèi)容
我們需要網(wǎng)頁中具有如下 HTML 結(jié)構(gòu)的導(dǎo)航, next_link 為下一頁的 url。
<div id="page_nav"> <a href="next_link">下一頁</a> </div>
相應(yīng)的 css
#page_nav {clear: both; text-align: center; }
以下這段代碼為通過 Ajax 的方式獲取下一頁的內(nèi)容,并追加到當(dāng)前內(nèi)容的末尾。
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.對追加的內(nèi)容進(jìn)行流體布局
熟悉 jQuery 的童鞋應(yīng)該會了解 js 對于通過 Ajax 方式插入到頁面中的元素并不起作用,但在這里并不需要作出如使用 live() 等處理,因為 Masonry 已經(jīng)在內(nèi)部作出類似的處理并且默認(rèn)起效,因此只需在 Ajax 成功執(zhí)行后的回調(diào)函數(shù)中調(diào)用 masonry() 方法即可。
$newElems = $result; $newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true ); });
3.對 Ajax 翻頁過程作出修飾
在上面的過程中已經(jīng)有完整的瀑布流布局,但是翻頁過程中并沒有任何提示,而且直接插入多張圖片可能會影響用戶體驗,因此需要對翻頁過程作出一些修飾,下面給出完整代碼。
這里需要增加一個如下的元素,用于提示正在加載新內(nèi)容或提示已到了最后一頁。
<div id="page_loading"> <span>給力加載中……</span> </div>
相應(yīng)的 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); // 把新的內(nèi)容設(shè)置為透明 $newElems = result.css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $container.masonry( 'appended', $newElems, true ); // 漸顯新的內(nèi)容 $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); } } });
相關(guān)文章
超好用的jQuery分頁插件jpaginate用法示例【附源碼下載】
這篇文章主要介紹了超好用的jQuery分頁插件jpaginate用法,結(jié)合實例形式簡單分析了jQuery分頁插件jpaginate的基本調(diào)用方式、參數(shù)屬性及配置方法,并附帶源碼供讀者下載,需要的朋友可以參考下2018-12-12jQuery支持動態(tài)參數(shù)將函數(shù)綁定到事件上的方法
這篇文章主要介紹了jQuery支持動態(tài)參數(shù)將函數(shù)綁定到事件上的方法,實例分析了兩種支持動態(tài)參數(shù)的函數(shù)綁定技巧,需要的朋友可以參考下2015-03-03jquery實現(xiàn)上傳文件大小類型的驗證例子(推薦)
下面小編就為大家?guī)硪黄猨query實現(xiàn)上傳文件大小類型的驗證例子(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨想過來看看吧2016-06-06基于jQuery實現(xiàn)的仿百度首頁滑動選項卡效果代碼
這篇文章主要介紹了基于jQuery實現(xiàn)的仿百度首頁滑動選項卡效果代碼,涉及jQuery響應(yīng)鼠標(biāo)事件實現(xiàn)頁面元素動態(tài)變換的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
DOM事件標(biāo)準(zhǔn)定義了兩種事件流,這兩種事件流有著顯著的不同并且可能對你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣,在它們成為標(biāo)準(zhǔn)之前,Netscape和微軟各自不同地實現(xiàn)了它們,下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序2015-08-08