jQuery 瀑布流 浮动布局（一）(延迟AJAX加载图片)
更新时间：2012年05月23日 17:37:09 作者：
瀑布流：这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部
浮动布局:即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请求。
DEMO下载（这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV，里面的是APACHE）
一、功能分析：
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请求。
DEMO下载（这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV，里面的是APACHE）
相关文章
这篇文章主要介绍了jquery常用特效方法使用示例,需要的朋友可以参考下2014-04-04
下面小编就为大家带来一篇深入理解jquery中的事件与动画。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
在园子里面看到kuibono的文章说JQuery不会自动回收xmlHttpRequest对象，并且在每次Ajax请求之后都会创建一个新的xmlHttpRequest对象，感到惊讶，索性写了一个程序验正了一下，果然如kuibono所言2012-06-06
这篇文章主要为大家详细介绍了jquery zTree异步加载简单实例，ztree采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章主要给大家分享了一段基于jquery实现等比缩放图片的代码，非常的实用，这里推荐给大家2014-12-12
这篇文章主要介绍了jQuery实现打开页面渐现效果的方法,结合实例形式分析了jQuery样式操作及页面元素的渐变效果实现技巧,需要的朋友可以参考下2016-07-07
在jQuery中,常常需要对元素的某个属性或数值进行比较,判断是否大于等于某个特定的值,在这种情况下,使用大于等于（>=）操作符是非常常见的,本文将介绍如何在jQuery中使用大于等于操作符的技巧,需要的朋友可以参考下2024-09-09
多个datatable共存造成多个表格的checkbox都被选中
所以当有多个datatable 引用到一个页面中的时候，全选事件会匹配全部的datatable，所以造成全部多个表格的checkbox被都被选中2013-07-07
下面小编就为大家带来一篇JQuery遍历元素的后代和同胞实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
最新评论