AJAX實(shí)現(xiàn)瀑布流觸發(fā)分頁(yè)與分頁(yè)觸發(fā)瀑布流的方法
所謂的瀑布流效果就正如輕圖床首頁(yè)效果那樣，多個(gè)內(nèi)容相近的欄目緊密排列，盡量使到欄目間的間隙最小（即流體布局），并且隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，新的數(shù)據(jù)會(huì)追加至當(dāng)前頁(yè)面的尾部直到所有數(shù)據(jù)加載完畢（滾動(dòng)觸發(fā)的 Ajax 翻頁(yè)）。
瀑布流觸發(fā)分頁(yè)
這里說(shuō)一下思路，雖然下面的實(shí)例中不能全都用到：
1.當(dāng)進(jìn)入屏幕時(shí)，判斷內(nèi)容是否為空，如果不為空，開始初始化數(shù)據(jù)。
2.當(dāng)往屏幕下拉時(shí)，判斷數(shù)據(jù)的最底部與屏幕高度+滾動(dòng)的高度的大小。如果最底部小于上面兩者之和，重新請(qǐng)求接口，即加載數(shù)據(jù)。
3.當(dāng)遇到數(shù)據(jù)超過(guò)某個(gè)頁(yè)數(shù)時(shí)，停止加載或者用分頁(yè)的形式顯示，點(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;
//跨域請(qǐng)求接口
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();
}
以上就是比較簡(jiǎn)單的隨著下拉內(nèi)容不斷加載的思路代碼。
JSON格式類似于（如果是動(dòng)態(tài)接口，可以通過(guò)callback函數(shù)，則這里不用加fill()）：
fill({"fans":[{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"},{"nickname":"蔡寶堅(jiān)","website":"jb51.net","youzhi":"2.5","time":"3分鐘前"}],"pageCount":2,"pageNo":1,"pageSize":10,"totalSize":20
});
原來(lái)靜態(tài)也可以做接口回調(diào)。通過(guò)靜態(tài)處理，則大大緩解了服務(wù)器壓力和加速生成內(nèi)容，是大流量網(wǎng)站必備的處理方式。
jQuery的ajax方法實(shí)現(xiàn)分頁(yè)觸發(fā)瀑布流
1.通過(guò) Ajax 的方式獲取下一頁(yè)的內(nèi)容
我們需要網(wǎng)頁(yè)中具有如下 HTML 結(jié)構(gòu)的導(dǎo)航， next_link 為下一頁(yè)的 url。
<div id="page_nav"> <a href="next_link">下一頁(yè)</a> </div>
相應(yīng)的 css
#page_nav {clear: both; text-align: center; }
以下這段代碼為通過(guò) Ajax 的方式獲取下一頁(yè)的內(nèi)容，并追加到當(dāng)前內(nèi)容的末尾。
nextHref = $("#next_page a").attr("href");
// 給瀏覽器窗口綁定 scroll 事件
$(window).bind("scroll",function(){
// 判斷窗口的滾動(dòng)條是否接近頁(yè)面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
// 判斷下一頁(yè)鏈接是否為空
if( nextHref != undefined ) {
// Ajax 翻頁(yè)
$.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.對(duì)追加的內(nèi)容進(jìn)行流體布局
熟悉 jQuery 的童鞋應(yīng)該會(huì)了解 js 對(duì)于通過(guò) Ajax 方式插入到頁(yè)面中的元素并不起作用，但在這里并不需要作出如使用 live() 等處理，因?yàn)?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.對(duì) Ajax 翻頁(yè)過(guò)程作出修飾
在上面的過(guò)程中已經(jīng)有完整的瀑布流布局，但是翻頁(yè)過(guò)程中并沒(méi)有任何提示，而且直接插入多張圖片可能會(huì)影響用戶體驗(yàn)，因此需要對(duì)翻頁(yè)過(guò)程作出一些修飾，下面給出完整代碼。
這里需要增加一個(gè)如下的元素，用于提示正在加載新內(nèi)容或提示已到了最后一頁(yè)。
<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 翻頁(yè)代碼
nextHref = $("#next_page a").attr("href");
// 給瀏覽器窗口綁定 scroll 事件
$(window).bind("scroll",function(){
// 判斷窗口的滾動(dòng)條是否接近頁(yè)面底部
if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 ) {
// 判斷下一頁(yè)鏈接是否為空
if( nextHref != undefined ) {
// 顯示正在加載模塊
$("#page_loading").show("slow");
// Ajax 翻頁(yè)
$.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("木有了噢，最后一頁(yè)了！");
$("#page_loading").show("fast");
setTimeout("$('#page_loading').hide()",1000);
setTimeout("$('#page_loading').remove()",1100);
}
}
});
- PHP+Jquery與ajax相結(jié)合實(shí)現(xiàn)下拉淡出瀑布流效果【無(wú)需插件】
- 純js實(shí)現(xiàn)瀑布流布局及ajax動(dòng)態(tài)新增數(shù)據(jù)
- PHP結(jié)合Jquery和ajax實(shí)現(xiàn)瀑布流特效
- jQuery 瀑布流 絕對(duì)定位布局（二）(延遲AJAX加載圖片)
- jQuery 瀑布流 浮動(dòng)布局（一）(延遲AJAX加載圖片)
- 深入學(xué)習(xí)js瀑布流布局
- javascript瀑布流式圖片懶加載實(shí)例
- javascript瀑布流布局實(shí)現(xiàn)方法詳解
- AJAX實(shí)現(xiàn)瀑布流布局
相關(guān)文章
jQuery的擴(kuò)展方法有兩種方式，一種是jQuery本身的擴(kuò)展方法，另一種是jQuery所選對(duì)象的擴(kuò)展方法，下面一起來(lái)看。2011-10-10
基于Jquery的淡入淡出的特效基礎(chǔ)練習(xí)實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2010-12-12
javascript 自定義回調(diào)函數(shù)示例代碼
使用函數(shù)做參數(shù)就有下面的好處：當(dāng)你a(b)的時(shí)候函數(shù)b就成了回調(diào)函數(shù)，而你還可以a(c)這個(gè)時(shí)候，函數(shù)c就成了回調(diào)函數(shù)2014-09-09
jQuery滾動(dòng)加載圖片實(shí)現(xiàn)原理
這篇文章主要介紹了jQuery滾動(dòng)加載圖片實(shí)現(xiàn)原理，通過(guò)四個(gè)方面來(lái)說(shuō)明懶加載技術(shù)的原理，感興趣的小伙伴們可以參考一下2015-12-12
jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示離開隱藏效果
本文為大家介紹下使用jquery animate實(shí)現(xiàn)鼠標(biāo)放上去顯示,離開就隱藏的效果，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過(guò)展開效果
這篇文章主要介紹了Bootstrap3.3.7導(dǎo)航欄下拉菜單鼠標(biāo)滑過(guò)展開效果,需要的朋友可以參考下2017-10-10
基于jQuery實(shí)現(xiàn)瀑布流頁(yè)面
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)瀑布流頁(yè)面的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
jQuery計(jì)算文本框字?jǐn)?shù)及限制文本框字?jǐn)?shù)的方法
一個(gè)中文算兩個(gè)，一個(gè)符號(hào)或數(shù)字，英文，算一個(gè)。（如果是規(guī)定140個(gè)字，乘以2，那么就是280個(gè)）。需要用到Math.ceil方法，因?yàn)樽詈筮€是要除以2來(lái)還原顯示給用戶的字?jǐn)?shù);2016-03-03
jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery點(diǎn)擊其他地方時(shí)菜單消失的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)點(diǎn)擊其他地方讓菜單消失的實(shí)現(xiàn)思路與解決方法,需要的朋友可以參考下2016-04-04
jquery實(shí)現(xiàn)彈出層遮罩效果的簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)彈出層遮罩效果的簡(jiǎn)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03