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-瀑布流-浮动布局(一的更多相关文章

  1. 风行一时瀑布流网页布局,实现无限加载(jquery)

    今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧 主要思路:一.根据屏幕宽度和单个浮动层的宽度来确定浮动层列数 var $boxs = $("#main>div" ...

  2. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  3. jQuery瀑布流从不同方向加载3种效果演示

    很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...

  4. jquery瀑布流排列样式代码

    <!DOCTYPE html><html><head lang="en"> <meta charset="gb2312" ...

  5. 关于瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)

    瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...

  6. 在 JQuery Mobile 中实现瀑布流图库布局

    先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来. 首先访问Masonry官网下载masonry.pkgd.min.js: ...

  7. jQuery瀑布流详解(PC及移动端)

    前言 瀑布流布局已成为当今非常普遍的图片展示方式,无论是PC还是手机等移动设备上.这种布局图片的样式大概分为三种:等高等宽.等宽不等高.等高不等宽,接下来我们就最为普遍的等宽不等高形式来作为示例. 我 ...

  8. jQuery瀑布流无限拖三大利器:masonry+imagesloaded+infinitescroll

    瀑布流已经是几乎过时的技术了,不过对于很多想要快速实现它的朋友而言,却绝非易事,因为即使我们已经有很多现成的代码,却发现在自己的开发环境中无法快速得到自己想要的结果.就像我们现在要介绍的三大利器(ma ...

  9. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

随机推荐

  1. ros-Qt代码环境的搭建

    1 建立package catkin_create_pkg beginner_tutorials roscpp 2 导入Qt Qt中打开整个工作空间的src/CMakeLists.txt 在倒数第二行 ...

  2. ENVI 5.1操作心得

    1.ENVI中计算的NDVI导出ARCGIS中识别的float数据类型,选择File——save as——erdas img.在ARCGIS中就能统计出NDVI信息 2.如何去掉Nan值从影像中心位置 ...

  3. Leeo 智能夜灯:默默守护你的家

    http://www.ifanr.com/462377 Leeo 智能夜灯是一个低调的设备.它不需要你与之交互,也不会产生多余的费用.当你把它插到墙上插座,然后下载应用后,就不用再管它了.然后,它就开 ...

  4. PHP获取mysql数据表的字段名称和详细信息的方法

    首先我们需要了解下查询MySQL数据库/表相关信息的SQL语句: 代码如下: SHOW DATABASES                                //列出 MySQL Serv ...

  5. Qt postEvent

    Qt3中可以直接向线程发送消息 QThread::postEventQ4中已不支持为了模拟向线程发送消息,可以通过QObject::moveToThread后,然后再向这个QObject发送消息 ob ...

  6. Opencv图像与矩阵的操作

    #include "stdafx.h" #include <cv.h> #include <cxcore.h> #include <highgui.h ...

  7. 【笔记】UML核心元素

    1.参与者 定义:在系统之外与系统交互的某人或某物. 特点:1.可以非人:2.与系统直接交互:3.主动发出动作并获得反馈:4.涉众(stakerholder)的代表 具有两个版型: 1.业务主角(bu ...

  8. Vbox下linux虚拟机根分区扩容

    前言 使用一段时间VBox中的linux后可能会显示根分区空间不足的情况,需要扩容. 通过查阅相关资料,VBox中linux扩容主要有两种办法:通过lvm扩容和通过gparted扩容 LVM条件:VB ...

  9. 常用的Eclilpse插件列表以及安装方式总结

    Eclipse常用插件的安装方式总结: 1.Maven Integration for Eclipse WTP     作用:用来方便开发和使用maven项目.     安装方式:Eclipse Ma ...

  10. PE文件结构详解(六)重定位

    前面两篇 PE文件结构详解(四)PE导入表 和 PE文件结构详解(五)延迟导入表 介绍了PE文件中比较常用的两种导入方式,不知道大家有没有注意到,在调用导入函数时系统生成的代码是像下面这样的: 在这里 ...