jQuery 瀑布流绝对定位布局（二）(延迟AJAX加载图片)

高洛峰

发布时间：2017-01-03 10:27:20

1043人浏览过

来源于php中文网

原创

瀑布流-绝对定位布局，与浮动布局的区别在于

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 = $("11111") 
//这里开始和浮动布局不一样了。其它部分在调用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)