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


Posted in Javascript onMay 23, 2012

浮动布局:即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)

Javascript 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
JS 图片缩放效果代码
Jun 09 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
JS判断字符串包含的方法
May 05 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
canvas 中如何实现物体的框选
Aug 05 Javascript
Javascript 面向对象(三)接口代码
May 23 #Javascript
Javascript 面向对象(二)封装代码
May 23 #Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 #Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 #Javascript
基于jQuery的图片左右无缝滚动插件
May 23 #Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 #Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
详细AngularJs4的图片剪裁组件的实例
2017/07/12 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
Python实现base64编码的图片保存到本地功能示例
2018/06/22 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python剪切视频与合并视频的实现
2020/03/03 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
如何基于Python按行合并两个txt
2020/11/03 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
林清轩官方网站:山茶花润肤油开创者
2016/10/26 全球购物
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
心得体会怎么写
2013/12/30 职场文书
企业务虚会发言材料
2014/10/20 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python
选购到合适的激光打印机
2022/04/21 数码科技
SQLServer常见数学函数梳理总结
2022/08/05 MySQL