jQuery 瀑布流 絕對位置布局(二)(延遲AJAX載入圖片)

來源:互聯網
上載者:User

瀑布流-絕對位置布局,與浮動布局的區別在於

1.布局不一樣:
  絕對位置:一個UL裡面放置所有的絕對位置的LI;
  浮動布局:多個(一般三四個)UL分布放置LI;
2.AJAX不一樣
  絕對位置:只需要將請求來的JSON資料(當然可以是別的格式的資料),插入到UL就可以了。然後再對這個新插入的LI進行TOP和LEFT設定;
  浮動布置:是將請求來的JSON資料(當然可以是別的格式的資料),分別插入到對應的UL當中,因為有絕對位置,所以不用對LI設定位置。會自動向下排列;

一、功能分析:

  1.定位每一個LI,即設定每一個LI的TOP和LEFT值;
  2.將AJAX的資料,放在LI中,插入到UL當中;

二、實現過程:

  1.設定LI的LEFT;
    在那一列?有了列數再乘以每個LI的寬度,就可以確定LEFT值
    找規律:
    現在我需要三列,那麼每一列當中的LI,都有一個共同的列號(自己設定0.1.2或者A.B.C,總之自己對這三列給一個標識)這裡設為
    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,因為要得出三個數的迴圈。所以以後要想得出這樣的迴圈,都可以考慮模數運算;
  2.設定TOP的值;
    因為每一列的總高度值都是不一樣的。所以我們要設三個變數來存放不同列的高度值。
    為什麼要取得這個值?
    1.初次載入的時候LI,的TOP值,是根據當前列高度值來設定的;
2.因為AJAX請求後的資料LI要插入到UL當中,必需知道當前列現在的總高度,然後給新的LI為它的TOP值;
其實中間有很多可以說的。但實在是太長了。我代碼中注釋也寫的很清楚了。有問題可以留言和我交流。!!
要提一點的就是,裡面有很多相同的功能,我都寫到一個FUNCTION當中,方便調用。例如要設LI的TOP和LEFT,要擷取LI的列數,要設定列的總高度。這都是共公的,也是功能塊,所以還是單獨用函數寫出來好; 複製代碼 代碼如下:(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;

//設定列的序號
function getcolums(col){
colmLeftIndex = col%value.cloum;
}
//設定當前列的高度
function getLiHeight(colIndex,hei){
switch(colIndex){
case 0:
liHeight_0 += hei
break;
case 1:
liHeight_1 += hei;
break;
case 2:
liHeight_2 += hei;
break;
}
}
//設定每一個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的高度值存到相應的列的總高度變數中
setLiOffset($liThis,liH)

});
//判斷每個UL的最後一個LI,是否進入可視地區
function see(objLiLast){
//瀏覽器可視地區的高度
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(){
//拖動滾條時,是否發送AJAX的一個“開關”
$this.children("ul").each(function(index, element) {
//引用當前的UL
var ulThis = this;
//引用最後一個LI
var lastLi = $("li:last",ulThis);
//調用是否進入可視地區函數
var isSee = see(lastLi);
if(isSee && onOff){
onOff = false;
//發送AJAX請求,載入新的圖片
$.ajax({
url:value.jsonUrl,
dataType:value.dataType,
success:function(data){
//對返回JSON裡面的list資料遍曆
$.each(data.list,function(keyList,ovalue){
//對LIST裡面的SRC數組遍曆,取到圖片路徑
$.each(ovalue,function(keySrc,avalue){
$.each(avalue,function(keysrc1,value1){
var $imgLi = $("<li><a href=''><img src='" + value1 + "' alt='' /><p>11111</p></a></li>")
//這裡開始和浮動布局不一樣了。其它部分在調用AJAX的時候,是一樣的;因為這裡不需要指定插入到那個UL;
$this.children("ul").append($imgLi);
//擷取這個新插入到頁面中的LI的列的序號
var _liindex = $imgLi.index();
getcolums(_liindex);
//擷取這個新插入到頁面中的LI的高度值
var _nlih = $imgLi.outerHeight();
//設定當前LI的TOP和LEFT
setLiOffset($imgLi,_nlih);
})
})
onOff = true;
})
}
})
}
});
})
}
})
})(jQuery)

DEMO下載 (這個要在本地機器上安裝伺服器平台。我用的是PHP套裝APPSERV,裡面的是APACHE)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.