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文件引入),这里就不过多描述 ...
随机推荐
- ros-Qt代码环境的搭建
1 建立package catkin_create_pkg beginner_tutorials roscpp 2 导入Qt Qt中打开整个工作空间的src/CMakeLists.txt 在倒数第二行 ...
- ENVI 5.1操作心得
1.ENVI中计算的NDVI导出ARCGIS中识别的float数据类型,选择File——save as——erdas img.在ARCGIS中就能统计出NDVI信息 2.如何去掉Nan值从影像中心位置 ...
- Leeo 智能夜灯:默默守护你的家
http://www.ifanr.com/462377 Leeo 智能夜灯是一个低调的设备.它不需要你与之交互,也不会产生多余的费用.当你把它插到墙上插座,然后下载应用后,就不用再管它了.然后,它就开 ...
- PHP获取mysql数据表的字段名称和详细信息的方法
首先我们需要了解下查询MySQL数据库/表相关信息的SQL语句: 代码如下: SHOW DATABASES //列出 MySQL Serv ...
- Qt postEvent
Qt3中可以直接向线程发送消息 QThread::postEventQ4中已不支持为了模拟向线程发送消息,可以通过QObject::moveToThread后,然后再向这个QObject发送消息 ob ...
- Opencv图像与矩阵的操作
#include "stdafx.h" #include <cv.h> #include <cxcore.h> #include <highgui.h ...
- 【笔记】UML核心元素
1.参与者 定义:在系统之外与系统交互的某人或某物. 特点:1.可以非人:2.与系统直接交互:3.主动发出动作并获得反馈:4.涉众(stakerholder)的代表 具有两个版型: 1.业务主角(bu ...
- Vbox下linux虚拟机根分区扩容
前言 使用一段时间VBox中的linux后可能会显示根分区空间不足的情况,需要扩容. 通过查阅相关资料,VBox中linux扩容主要有两种办法:通过lvm扩容和通过gparted扩容 LVM条件:VB ...
- 常用的Eclilpse插件列表以及安装方式总结
Eclipse常用插件的安装方式总结: 1.Maven Integration for Eclipse WTP 作用:用来方便开发和使用maven项目. 安装方式:Eclipse Ma ...
- PE文件结构详解(六)重定位
前面两篇 PE文件结构详解(四)PE导入表 和 PE文件结构详解(五)延迟导入表 介绍了PE文件中比较常用的两种导入方式,不知道大家有没有注意到,在调用导入函数时系统生成的代码是像下面这样的: 在这里 ...