jQuery-瀑布流-浮动布局(一
jQuery-瀑布流-浮动布局(一)(延迟AJAX加载图片)
瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
浮动布局:即HTML结构的列,是用浮动方式。
[哇哦-淘宝]http://wow.taobao.com/在线实例!
一、功能分析:
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-瀑布流-浮动布局(一的更多相关文章
- 风行一时瀑布流网页布局,实现无限加载(jquery)
今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧 主要思路:一.根据屏幕宽度和单个浮动层的宽度来确定浮动层列数 var $boxs = $("#main>div" ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
- jquery瀑布流排列样式代码
<!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...
- 关于瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...
- 在 JQuery Mobile 中实现瀑布流图库布局
先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...
- jQuery瀑布流详解(PC及移动端)
前言 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我 ...
- jQuery瀑布流无限拖三大利器:masonry+imagesloaded+infinitescroll
瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...
- jquery瀑布流的制作
首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...
随机推荐
- java递归方法
一个方法体内调用他自身,称为方法递归. 方法递归是一种隐式的循环,Tahiti重复执行某段代码,但这种重复执行无需循环控制 /* Author:oliver QIN DATE:2015-12-19 D ...
- nodejs是单线程
你不妨先思考一个问题:在单核时代,PHP之类多线程或者多进程的,是怎么处理并发的?是排队吗? 答案是:的确就是排队.但是并不是一定要处理完请求1才能去处理请求2:实际上请求的处理过程中,有很多的时间是 ...
- 【js】正则表达式豁然开朗
http://www.jikexueyuan.com/course/809_3.html?ss=1 小括号,中括号 中括号:[] ,它表示里面的字符任选一个 比如[abcd]+,就表示abcd这四个字 ...
- 华为章宇:如何学习开源项目及Ceph的浅析
转自http://www.csdn.net/article/2014-04-10/2819247-how-to-learn-opensouce-project-&-ceph 摘要:开源技术的学 ...
- windows 2012 服务器打开ping端口,开通远程连接
windows 2012 服务器打开ping端口,开通远程桌面连接 控制面板->系统与安全->高级防火墙->入站规则 找到:windows 远程桌面 (http in ) 右键启用 ...
- 利用Vagrant搭建多平台环境
Vagrant 是一个创建和分发虚拟化开发环境的工具,使用ruby编写,本身并不包含虚拟机管理软件,因此我们需要配合Vagrant安装一个虚拟机软件.Vagrant支持VMware, Virtual ...
- [C#]Linq To Xml 介绍- 转
LINQ to XML 类概述 LINQ to XML 旨在使 XML 名称尽可能简单. XAttribute 类 XAttribute 表示一个 XML 属性. XCData 类 XCDat ...
- protocol buffer 整数序列化
http://blog.csdn.net/csfreebird/article/details/7624807 varints用于正整数 (无符号整数) varints 是 一个很不错的技术.将一个整 ...
- 【DP】BZOJ 1260: [CQOI2007]涂色paint
1260: [CQOI2007]涂色paint Time Limit: 30 Sec Memory Limit: 64 MBSubmit: 893 Solved: 540[Submit][Stat ...
- PHP开发框架[流行度排名]
在PHP开发中,选择合适的框架有助于加快软件开发,节约宝贵的项目时间,让开发者专注于功能的实现上.Sitepoint网站做了一个小的调查,结果显示最流行的PHP框架前三甲为:Laravel.Phalc ...