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ù)寫出來好;
(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)
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)
您可能感興趣的文章:
- jQuery Masonry瀑布流布局神器使用詳解
- jquery實(shí)現(xiàn)簡單的瀑布流布局
- 網(wǎng)頁瀑布流布局jQuery實(shí)現(xiàn)代碼
- 基于jquery實(shí)現(xiàn)瀑布流布局
- jQuery實(shí)現(xiàn)瀑布流布局詳解(PC和移動(dòng)端)
- jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
- Jquery實(shí)現(xiàn)瀑布流布局(備有詳細(xì)注釋)
- jQuery實(shí)現(xiàn)瀑布流布局
- jQuery 瀑布流 浮動(dòng)布局(一)(延遲AJAX加載圖片)
- JQuery實(shí)現(xiàn)簡單瀑布流布局
相關(guān)文章
jquery實(shí)現(xiàn)焦點(diǎn)輪播效果
本文主要介紹了jquery實(shí)現(xiàn)焦點(diǎn)輪播效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02有關(guān)jQuery中parent()和siblings()的小問題
本文通過一個(gè)實(shí)例給大家介紹有關(guān)parent()和siblings()問題原因及解決方案,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧2016-06-06jquery插件實(shí)現(xiàn)圖片對(duì)比
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片對(duì)比,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04jQuery實(shí)現(xiàn)的仿select功能代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿select功能代碼,使用jquery.select.js插件實(shí)現(xiàn)select選擇功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
這篇文章主要介紹了使用jquery實(shí)現(xiàn)的鼠標(biāo)放上去顯示懸浮層即彈出定位的div層,需要的朋友可以參考下2014-04-04基于JQuery.timer插件實(shí)現(xiàn)一個(gè)計(jì)時(shí)器
基于JQuery.timer插件實(shí)現(xiàn)一個(gè)計(jì)時(shí)器,需要的朋友可以參考下。2010-04-042014年50個(gè)程序員最適用的免費(fèi)JQuery插件
這篇文章主要介紹了2014年50個(gè)程序員最適用的免費(fèi)JQuery插件,需要的朋友可以參考下2014-12-12通過JQuery,JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊
這篇文章主要介紹了通過JQuery,JQueryUI和Jsplumb實(shí)現(xiàn)拖拽模塊,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06