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

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

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

浮動布局:即HTML結構的列，是用浮動方式。

一、功能分析：

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

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

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

復制代碼代碼如下:

 
$(function(){ 
//判斷每個UL的最后一個LI，是否進入可視區(qū)域 
function see(objLiLast){ 
//瀏覽器可視區(qū)域的高度 
var see = document.documentElement.clientHeight; 
//滾動條滑動的距離 
var winScroll = $(this).scrollTop(); 
//每個UL的最后一個LI，距離瀏覽器頂部的 
var lastLisee = objLiLast.offset().top 
return lastLisee < (see+winScroll)?true:false; 
} 
//是否請求出AJAX的“開關”； 
var onOff = true; 
$(window).scroll(function(){ 
//拖動滾條時，是否發(fā)送AJAX的一個“開關” 
$("ul").each(function(index, element) { 
//引用當前的UL 
var ulThis = this; 
//引用最后一個LI 
var lastLi = $("li:last",this); 
//調(diào)用是否進入可視區(qū)域函數(shù) 
var isSee = see(lastLi); 
if(isSee && onOff){ 
onOff = false; 
//發(fā)送AJAX請求，載入新的圖片 
$.getJSON("test1.js",function(data){ 
//對返回JSON里面的list數(shù)據(jù)遍歷 
$.each(data.list,function(keyList,ovalue){ 
//對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; 
}) 
}) 
} 
}); 
}) 
}) 

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

DEMO下載（這個要在本地機器上安裝服務器平臺。我用的是PHP套裝APPSERV，里面的是APACHE）

您可能感興趣的文章: