快捷導(dǎo)航

jQuery 瀑布流浮動(dòng)布局（一）(延遲AJAX加載圖片)

更新時(shí)間：2012年05月23日 17:37:09 作者：

瀑布流：這種布局適合于小數(shù)據(jù)塊，每個(gè)數(shù)據(jù)塊內(nèi)容相近且沒有側(cè)重。通常，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部

浮動(dòng)布局:即HTML結(jié)構(gòu)的列，是用浮動(dòng)方式。

一、功能分析：

　　1.判斷圖片是否進(jìn)入可視區(qū)域；
　　2.用AJAX請(qǐng)求服務(wù)器數(shù)據(jù)；
　　3.將數(shù)據(jù)播入到相應(yīng)的列隊(duì)；

二、實(shí)現(xiàn)方法：

　　給window的scroll事件l綁定一個(gè)處理函數(shù)：做如下工作：
　　1.如何判斷最后一行的圖片，是否進(jìn)入了可視區(qū)域？
　　　　如果：最后一行的某個(gè)圖片距離瀏覽器可視區(qū)域頂部的距離值小于（可視區(qū)域的高度+滾動(dòng)條滑動(dòng)的距離值）；
　　　　那么：就可以判定這個(gè)圖片進(jìn)入了瀏覽器的可視區(qū)域；
　　2.如何用AJAX請(qǐng)求服務(wù)器數(shù)據(jù);
　　　　$.getJSON()方法，直接請(qǐng)求JSON格式的數(shù)據(jù)；
　　3.將數(shù)據(jù)播入到相應(yīng)的列隊(duì)；
　　　　使用$.each循環(huán)，將對(duì)應(yīng)的JSON數(shù)據(jù)入到對(duì)應(yīng)的列當(dāng)中

復(fù)制代碼代碼如下:

 
$(function(){ 
//判斷每個(gè)UL的最后一個(gè)LI，是否進(jìn)入可視區(qū)域 
function see(objLiLast){ 
//瀏覽器可視區(qū)域的高度 
var see = document.documentElement.clientHeight; 
//滾動(dòng)條滑動(dòng)的距離 
var winScroll = $(this).scrollTop(); 
//每個(gè)UL的最后一個(gè)LI，距離瀏覽器頂部的 
var lastLisee = objLiLast.offset().top 
return lastLisee < (see+winScroll)?true:false; 
} 
//是否請(qǐng)求出AJAX的“開關(guān)”； 
var onOff = true; 
$(window).scroll(function(){ 
//拖動(dòng)滾條時(shí)，是否發(fā)送AJAX的一個(gè)“開關(guān)” 
$("ul").each(function(index, element) { 
//引用當(dāng)前的UL 
var ulThis = this; 
//引用最后一個(gè)LI 
var lastLi = $("li:last",this); 
//調(diào)用是否進(jìn)入可視區(qū)域函數(shù) 
var isSee = see(lastLi); 
if(isSee && onOff){ 
onOff = false; 
//發(fā)送AJAX請(qǐng)求，載入新的圖片 
$.getJSON("test1.js",function(data){ 
//對(duì)返回JSON里面的list數(shù)據(jù)遍歷 
$.each(data.list,function(keyList,ovalue){ 
//對(duì)LIST里面的SRC數(shù)組遍歷,取到圖片路徑 
$.each(ovalue,function(keySrc,avalue){ 
$.each(avalue,function(keysrc1,value1){ 
var imgLi = $("<li><a href=''><img src='" + value1 + "' alt='' /><p>11111</p></a></li>") 
$("ul").eq(keysrc1).append(imgLi); 
}) 
}) 
onOff = true; 
}) 
}) 
} 
}); 
}) 
}) 

三、注意事項(xiàng)
　　當(dāng)在執(zhí)行AJAX請(qǐng)求的時(shí)候，是有數(shù)據(jù)在傳輸，所以需要一定的時(shí)間，才能獲得返回的jSON數(shù)據(jù)。（有了數(shù)據(jù)，才能向UL中插入LI）而這個(gè)時(shí)候，如果用戶又一次拖動(dòng)滾動(dòng)條，那么上面代碼的isSee 還是返回true；所以又會(huì)執(zhí)行AJAX請(qǐng)求。這里我們就需要手動(dòng)設(shè)置一個(gè)“開關(guān)”，來控制。
　　只有當(dāng)數(shù)據(jù)加載完成后，并且都添加進(jìn)了對(duì)應(yīng)的UL之后，再次拖動(dòng)時(shí)，打開這個(gè)“開關(guān)”，即onOff設(shè)為true;,
　　因?yàn)閿?shù)據(jù)加載完成后，意味著每列的UL里面，在最后面又多出了剛通過AJAX添加進(jìn)來的LI數(shù)據(jù)，所以可以有再次的AJAX請(qǐng)求。

DEMO下載（這個(gè)要在本地機(jī)器上安裝服務(wù)器平臺(tái)。我用的是PHP套裝APPSERV，里面的是APACHE）

您可能感興趣的文章: