欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2012年05月23日 17:40:20   作者:  
瀑布流-絕對(duì)定位布局,與浮動(dòng)布局的區(qū)別在于布局不一樣,AJAX不一樣
瀑布流-絕對(duì)定位布局,與浮動(dòng)布局的區(qū)別在于

1.布局不一樣:
  絕對(duì)定位:一個(gè)UL里面放置所有的絕對(duì)定位的LI;
  浮動(dòng)布局:多個(gè)(一般三四個(gè))UL分布放置LI;
2.AJAX不一樣
  絕對(duì)定位:只需要將請(qǐng)求來的JSON數(shù)據(jù)(當(dāng)然可以是別的格式的數(shù)據(jù)),插入到UL就可以了。然后再對(duì)這個(gè)新插入的LI進(jìn)行TOP和LEFT設(shè)置;
  浮動(dòng)布置:是將請(qǐng)求來的JSON數(shù)據(jù)(當(dāng)然可以是別的格式的數(shù)據(jù)),分別插入到對(duì)應(yīng)的UL當(dāng)中,因?yàn)橛薪^對(duì)定位,所以不用對(duì)LI設(shè)置位置。會(huì)自動(dòng)向下排列;

一、功能分析:

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

二、實(shí)現(xiàn)過程:

  1.設(shè)置LI的LEFT;
    在那一列?有了列數(shù)再乘以每個(gè)LI的寬度,就可以確定LEFT值
    找規(guī)律:
    現(xiàn)在我需要三列,那么每一列當(dāng)中的LI,都有一個(gè)共同的列號(hào)(自己設(shè)置0.1.2或者A.B.C,總之自己對(duì)這三列給一個(gè)標(biāo)識(shí))這里設(shè)為
    0號(hào)第一列
    1號(hào)第二列
    2號(hào)第三列
    所以每一行,只能放三個(gè)LI
    第一個(gè)li 在 0號(hào) 第二個(gè)li 在 1號(hào) 第三個(gè)li 在 2號(hào)
    第四個(gè)li 在 0號(hào) 第五個(gè)li 在 1號(hào) 第六個(gè)li 在 2號(hào)
    所以想到用索引取模,正好可以得出0 1 2 ,0 1 2 ……
    通過這個(gè)我們就可以判斷LI在那一列;
    index%3 = 0 1 2 ,0 1 2 ……
    為什么要模3,因?yàn)橐贸鋈齻€(gè)數(shù)的循環(huán)。所以以后要想得出這樣的循環(huán),都可以考慮取模運(yùn)算;
  2.設(shè)置TOP的值;
    因?yàn)槊恳涣械目偢叨戎刀际遣灰粯拥?。所以我們要設(shè)三個(gè)變量來存放不同列的高度值。
    為什么要取得這個(gè)值?
    1.初次加載的時(shí)候LI,的TOP值,是根據(jù)當(dāng)前列高度值來設(shè)置的;
2.因?yàn)锳JAX請(qǐng)求后的數(shù)據(jù)LI要插入到UL當(dāng)中,必需知道當(dāng)前列現(xiàn)在的總高度,然后給新的LI為它的TOP值;
其實(shí)中間有很多可以說的。但實(shí)在是太長了。我代碼中注釋也寫的很清楚了。有問題可以留言和我交流。??!
要提一點(diǎn)的就是,里面有很多相同的功能,我都寫到一個(gè)FUNCTION當(dāng)中,方便調(diào)用。例如要設(shè)LI的TOP和LEFT,要獲取LI的列數(shù),要設(shè)置列的總高度。這都是共公的,也是功能塊,所以還是單獨(dú)用函數(shù)寫出來好;
復(fù)制代碼 代碼如下:

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

//設(shè)置列的序號(hào)
function getcolums(col){
colmLeftIndex = col%value.cloum;
}
//設(shè)置當(dāng)前列的高度
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è)置每一個(gè)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;
}
}

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

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

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

相關(guān)文章

最新評(píng)論