jQuery 瀑布流 浮动布局(延迟AJAX加载图片) （转）

浮动布局:即HTML结构的列，是用浮动方式。

一、功能分析：

1.判断图片是否进入可视区域；

2.用AJAX请求服务器数据；

3.将数据播入到相应的列队；

二、实现方法：

给window的scroll事件l绑定一个处理函数：做如下工作：

1.如何判断最后一行的图片，是否进入了可视区域？

如果：最后一行的某个图片距离浏览器可视区域顶部的距离值 小于 （可视区域的高度+滚动条滑动的距离值）；

那么：就可以判定这个图片进入了浏览器的可视区域；

2.如何用AJAX请求服务器数据;

$.getJSON()方法，直接请求JSON格式的数据；

3.将数据播入到相应的列队；

使用$.each循环，将对应的JSON数据入到对应的列当中

复制代码 代码如下:

$(function(){

//判断每个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的一个“开关”

$("ul").each(function(index, element) {

//引用当前的UL

var ulThis = this;

//引用最后一个LI

var lastLi = $("li:last",this);

//调用是否进入可视区域函数

var isSee = see(lastLi);

if(isSee && onOff){

onOff = false;

//发送AJAX请求，载入新的图片

$.getJSON("test1.js",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>")

$("ul").eq(keysrc1).append(imgLi);

})

})

onOff = true;

})

})

}

});

})

})

三、注意事项

当在执行AJAX请求的时候，是有数据在传输，所以需要一定的时间，才能获得返回的jSON数据。（有了数据，才能向UL中插入LI）而这个时候，如果用户又一次拖动滚动条，那么上面代码的isSee 还是返回true；所以又会执行AJAX请求。这里我们就需要手动设置一个“开关”，来控制。

只有当数据加载完成后，并且都添加进了对应的UL之后，再次拖动时，打开这个“开关”，即onOff设为true;,

因为数据加载完成后，意味着每列的UL里面，在最后面又多出了刚通过AJAX添加进来的LI数据，所以可以有再次的AJAX请求。

详细出处参考：/article/30360.htm

瀑布流-绝对定位布局，与浮动布局的区别在于布局不一样,AJAX不一样

-

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

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({

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)

详细出处参考：/article/30361.htm