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参数个数可变的函数举例说明
Oct 10 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
Feb 18 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
Apr 24 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 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加密解密实例分析
2015/12/25 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php实现URL加密解密的方法
2016/11/17 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
javascript下string.format函数补充
2010/08/24 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
nodejs基础知识
2017/02/03 NodeJs
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
python中字符串的操作方法大全
2018/06/03 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
2018/12/10 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
加拿大留学自荐信
2014/01/28 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
道德之星事迹材料
2014/05/03 职场文书
销售代理协议书
2014/09/30 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
教你使用TensorFlow2识别验证码
2021/06/11 Python