快捷導(dǎo)航

jQuery 瀑布流絕對定位布局（二）(延遲AJAX加載圖片)

更新時間：2012年05月23日 17:40:20 作者：

瀑布流-絕對定位布局，與浮動布局的區(qū)別在于布局不一樣,AJAX不一樣

瀑布流-絕對定位布局，與浮動布局的區(qū)別在于

1.布局不一樣：
　　絕對定位：一個UL里面放置所有的絕對定位的LI；
　　浮動布局：多個（一般三四個）UL分布放置LI；
2.AJAX不一樣
　　絕對定位：只需要將請求來的JSON數(shù)據(jù)（當然可以是別的格式的數(shù)據(jù)），插入到UL就可以了。然后再對這個新插入的LI進行TOP和LEFT設(shè)置；
　　浮動布置：是將請求來的JSON數(shù)據(jù)（當然可以是別的格式的數(shù)據(jù)），分別插入到對應(yīng)的UL當中，因為有絕對定位，所以不用對LI設(shè)置位置。會自動向下排列；

一、功能分析：

　　1.定位每一個LI，即設(shè)置每一個LI的TOP和LEFT值；
　　2.將AJAX的數(shù)據(jù)，放在LI中，插入到UL當中；

二、實現(xiàn)過程：

　　1.設(shè)置LI的LEFT；
　　　　在那一列？有了列數(shù)再乘以每個LI的寬度，就可以確定LEFT值
　　　　找規(guī)律：
　　　　現(xiàn)在我需要三列，那么每一列當中的LI，都有一個共同的列號（自己設(shè)置0.1.2或者A.B.C，總之自己對這三列給一個標識）這里設(shè)為
　　　　0號第一列
　　　　1號第二列
　　　　2號第三列
　　　　所以每一行，只能放三個LI
　　　　第一個li 在 0號第二個li 在 1號第三個li 在 2號
　　　　第四個li 在 0號第五個li 在 1號第六個li 在 2號
　　　　所以想到用索引取模,正好可以得出0 1 2 ，0 1 2 ……
　　　　通過這個我們就可以判斷LI在那一列；
　　　　index%3 = 0 1 2 ，0 1 2 ……
　　　　為什么要模3,因為要得出三個數(shù)的循環(huán)。所以以后要想得出這樣的循環(huán)，都可以考慮取模運算；
　　2.設(shè)置TOP的值；
　　　　因為每一列的總高度值都是不一樣的。所以我們要設(shè)三個變量來存放不同列的高度值。
　　　　為什么要取得這個值？
　　　　1.初次加載的時候LI，的TOP值，是根據(jù)當前列高度值來設(shè)置的；
2.因為AJAX請求后的數(shù)據(jù)LI要插入到UL當中，必需知道當前列現(xiàn)在的總高度，然后給新的LI為它的TOP值；
其實中間有很多可以說的。但實在是太長了。我代碼中注釋也寫的很清楚了。有問題可以留言和我交流。??！
要提一點的就是，里面有很多相同的功能，我都寫到一個FUNCTION當中，方便調(diào)用。例如要設(shè)LI的TOP和LEFT，要獲取LI的列數(shù)，要設(shè)置列的總高度。這都是共公的，也是功能塊，所以還是單獨用函數(shù)寫出來好；

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

 
(function($){ 
$.fn.extend({ 
waterfall:function(value){ 
value=$.extend({ 
jsonUrl:"", 
dataType:"", 
cloum:"", 
liWidth:"" 
},value) 
//引用包函布瀑布流的DIV對象 
var $this = $(this); 
//存放列的充號 
var colmLeftIndex = 0; 
//用來存放每一列的高度值； 
var liHeight_0 = 0; 
var liHeight_1 = 0; 
var liHeight_2 = 0; 

//設(shè)置列的序號 
function getcolums(col){ 
colmLeftIndex = col%value.cloum; 
} 
//設(shè)置當前列的高度 
function getLiHeight(colIndex,hei){ 
switch(colIndex){ 
case 0: 
liHeight_0 += hei 
break; 
case 1: 
liHeight_1 += hei; 
break; 
case 2: 
liHeight_2 += hei; 
break; 
} 
} 
//設(shè)置每一個LI的TOP和LEFT 
function setLiOffset(oli,liH){ 
switch(colmLeftIndex){ 
case 0 : 
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_0}); 
getLiHeight(colmLeftIndex,liH); 
console.log(liHeight_0); 
break; 
case 1: 
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_1}); 
getLiHeight(colmLeftIndex,liH); 
break; 
case 2: 
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_2}); 
getLiHeight(colmLeftIndex,liH); 
break; 
} 
} 

//初次加載時，遍歷所有的LI，并定位每一個LI的TOP和LEFT值 
$this.find("li").each(function(index, element){ 
//當前LI的引用 
var $liThis = $(this); 
//獲得當前LI的高度值 
var liH = $liThis.outerHeight(); 
//獲得當前列的序號 
getcolums(index); 
//把當前LI的高度值存到相應(yīng)的列的總高度變量中 
setLiOffset($liThis,liH) 

}); 
//判斷每個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; 
} 
//是否發(fā)出AJAX的“開關(guān)”； 
var onOff = true; 
$(window).scroll(function(){ 
//拖動滾條時，是否發(fā)送AJAX的一個“開關(guān)” 
$this.children("ul").each(function(index, element) { 
//引用當前的UL 
var ulThis = this; 
//引用最后一個LI 
var lastLi = $("li:last",ulThis); 
//調(diào)用是否進入可視區(qū)域函數(shù) 
var isSee = see(lastLi); 
if(isSee && onOff){ 
onOff = false; 
//發(fā)送AJAX請求，載入新的圖片 
$.ajax({ 
url:value.jsonUrl, 
dataType:value.dataType, 
success: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>") 
//這里開始和浮動布局不一樣了。其它部分在調(diào)用AJAX的時候，是一樣的；因為這里不需要指定插入到那個UL； 
$this.children("ul").append($imgLi); 
//獲取這個新插入到頁面中的LI的列的序號 
var _liindex = $imgLi.index(); 
getcolums(_liindex); 
//獲取這個新插入到頁面中的LI的高度值 
var _nlih = $imgLi.outerHeight(); 
//設(shè)置當前LI的TOP和LEFT 
setLiOffset($imgLi,_nlih); 
}) 
}) 
onOff = true; 
}) 
} 
}) 
} 
}); 
}) 
} 
}) 
})(jQuery) 