瀑布流-絕對定位佈局，與浮動佈局的區別在於
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或設定0.1.2或設定A.B.C，總之自己對這三列給一個標識）這裡設為
0號第一列
1號第二列 〜 1號第二列 🎀 第一個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 …… index%3 = 0 1 2 ，0 1 2 …… index%3 = 0 1 2 ，0 1 2 ……『 。所以以後要得出這樣的循環，都可以考慮取模運算；
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)
