瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。

一、功能分析:

  1.判断图片是否进入可视区域;

  2.用AJAX请求服务器数据;

  3.将数据播入到相应的列队;

二、实现方法:

  给window的scroll事件l绑定一个处理函数:做如下工作:

  1.如何判断最后一行的图片,是否进入了可视区域?

    如果:最后一行的某个图片距离浏览器可视区域顶部的距离值  小于  (可视区域的高度+滚动条滑动的距离值);

    那么:就可以判定这个图片进入了浏览器的可视区域;

  2.如何用AJAX请求服务器数据;

    $.getJSON()方法,直接请求JSON格式的数据;

  3.将数据播入到相应的列队;

    使用$.each循环,将对应的JSON数据入到对应的列当中

三、注意事项

  当在执行AJAX请求的时候,是有数据在传输,所以需要一定的时间,才能获得返回的jSON数据。(有了数据,才能向UL中插入LI)而这个时候,如果用户又一次拖动滚动条,那么上面代码的isSee 还是返回true;所以又会执行AJAX请求。这里我们就需要手动设置一个“开关”,来控制。

  只有当数据加载完成后,并且都添加进了对应的UL之后,再次拖动时,打开这个“开关”,即onOff设为true;,

  因为数据加载完成后,意味着每列的UL里面,在最后面又多出了刚通过AJAX添加进来的LI数据,所以可以有再次的AJAX请求。

$(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;
})
})
}
}); })
})

瀑布流-绝对定位布局,与浮动布局的区别在于

1.布局不一样:

  绝对定位:一个UL里面放置所有的绝对定位的LI;

  浮动布局:多个(一般三四个)UL分布放置LI;

2.AJAX不一样

  绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了。然后再对这个新插入的LI进行TOP和LEFT设置;

  浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置。会自动向下排列;

一、功能分析:

  1.定位每一个LI,即设置每一个LI的TOP和LEFT值;

  2.将AJAX的数据,放在LI中,插入到UL当中;

二、实现过程:

  1.设置LI的LEFT;

    在那一列?有了列数再乘以每个LI的宽度,就可以确定LEFT值

    找规律:

    现在我需要三列,那么每一列当中的LI,都有一个共同的列号(自己设置0.1.2或者A.B.C,总之自己对这三列给一个标识)这里设为

    0号第一列

    1号第二列

    2号第三列

    所以每一行,只能放三个LI

    第一个li  在 0号   第二个li 在 1号  第三个li 在 2号

    第四个li  在 0号   第五个li 在 1号  第六个li 在 2号

    所以想到用索引取模,正好可以得出0 1 2 ,0 1 2 ……

    通过这个我们就可以判断LI在那一列;

    index%3 = 0 1 2 ,0 1 2 ……

    为什么要模3,因为要得出三个数的循环。所以以后要想得出这样的循环,都可以考虑取模运算;

  2.设置TOP的值;

    因为每一列的总高度值都是不一样的。所以我们要设三个变量来存放不同列的高度值。

    为什么要取得这个值?

    1.初次加载的时候LI,的TOP值,是根据当前列高度值来设置的;

2.因为AJAX请求后的数据LI要插入到UL当中,必需知道当前列现在的总高度,然后给新的LI为它的TOP值;

其实中间有很多可以说的。但实在是太长了。我代码中注释也写的很清楚了。有问题可以留言和我交流。!!

要提一点的就是,里面有很多相同的功能,我都写到一个FUNCTION当中,方便调用。例如要设LI的TOP和LEFT,要获取LI的列数,要设置列的总高度。这都是共公的,也是功能块,所以还是单独用函数写出来好;

完整代码:

(function($){
$.fn.extend({
waterfall:function(value){
value=$.extend({
jsonUrl:"",
dataType:"",
cloum:"",
liWidth:""
},value) //引用包函布瀑布流的DIV对象
var $this = $(this); //存放列的充号
var colmLeftIndex = 0; //用来存放每一列的高度值;
var liHeight_0 = 0;
var liHeight_1 = 0;
var liHeight_2 = 0; //设置列的序号
function getcolums(col){
colmLeftIndex = col%value.cloum;
} //设置当前列的高度
function getLiHeight(colIndex,hei){
switch(colIndex){
case 0:
liHeight_0 += hei
break;
case 1:
liHeight_1 += hei;
break;
case 2:
liHeight_2 += hei;
break;
}
} //设置每一个LI的TOP和LEFT
function setLiOffset(oli,liH){
switch(colmLeftIndex){
case 0 :
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_0});
getLiHeight(colmLeftIndex,liH);
console.log(liHeight_0); break;
case 1:
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_1});
getLiHeight(colmLeftIndex,liH);
break; case 2:
oli.css({"left":value.liWidth*colmLeftIndex,"top":liHeight_2});
getLiHeight(colmLeftIndex,liH);
break;
}
} //初次加载时,遍历所有的LI,并定位每一个LI的TOP和LEFT值
$this.find("li").each(function(index, element){
//当前LI的引用
var $liThis = $(this);
//获得当前LI的高度值
var liH = $liThis.outerHeight(); //获得当前列的序号
getcolums(index); //把当前LI的高度值存到相应的列的总高度变量中
setLiOffset($liThis,liH) }); //判断每个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的一个“开关”
$this.children("ul").each(function(index, element) { //引用当前的UL
var ulThis = this;
//引用最后一个LI
var lastLi = $("li:last",ulThis);
//调用是否进入可视区域函数
var isSee = see(lastLi); if(isSee && onOff){
onOff = false;
//发送AJAX请求,载入新的图片
$.ajax({
url:value.jsonUrl,
dataType:value.dataType,
success: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>")
//这里开始和浮动布局不一样了。其它部分在调用AJAX的时候,是一样的;因为这里不需要指定插入到那个UL;
$this.children("ul").append($imgLi); //获取这个新插入到页面中的LI的列的序号
var _liindex = $imgLi.index();
getcolums(_liindex); //获取这个新插入到页面中的LI的高度值 var _nlih = $imgLi.outerHeight(); //设置当前LI的TOP和LEFT
setLiOffset($imgLi,_nlih); })
})
onOff = true;
})
}
})
}
});
})
}
})
})(jQuery)

jQuery-瀑布流 布局 (处理页面滚动和AJAX加载延迟问题)的更多相关文章

  1. Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. AngularJS 实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...

  3. AngularJS:实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...

  4. Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多

    http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...

  5. 用 jQuery Masonry 插件创建瀑布流式的页面(转)

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  6. 用 jQuery Masonry 插件创建瀑布流式的页面

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  7. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

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

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

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

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

随机推荐

  1. uva12096 The SetStack Computer By sixleaves

    代码     typedef  map<Set,  vector<Set> Setcache;                  stack<               ci ...

  2. poj 1276 Cash Machine_多重背包

    题意:略 多重背包 #include <iostream> #include<cstring> #include<cstdio> using namespace s ...

  3. 我使用过的Linux命令之file - 检测并显示文件类型

    摘自:http://codingstandards.iteye.com/blog/804463 我使用过的Linux命令之file - 检测并显示文件类型 用途说明 file命令是用来检测并显示文件类 ...

  4. hdu 4627 The Unsolvable Problem(暴力的搜索)

    Problem Description There are many unsolvable problem in the world.It could be about one or about ze ...

  5. 实现简答LinkedList

    package com.表栈和队列; import java.util.Iterator; /**  * 实现LinkedList  * 60页  * @author zj  *  * @param ...

  6. javascript常用的107个语句

    1.document.write(“”); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是: document->html->(head,body) 4.一个浏览器窗口中的 ...

  7. 【位运算DFS/DLX】【HDU1426】【数独】

    题意:标准的一道数独题 DFS做法: 将横纵九宫格里的数字用位运算状态压缩,且可以通过逻辑或来确定总共有哪些数字被选择了,很方便也很快,代码如下 #include <cstdio> #in ...

  8. git创建分支

    1.创建本地分支名称为dev的本地分支 git branch dev 2.将本地分支添加到远程分支 git push origin dev 3.查看创建的本地分支, 带有*符号的分支,代表当前所在分支 ...

  9. C#中byte[] 与指针

    本文假定读者熟悉byte[].指针. C#是类型安全的,默认是不允许使用指针,但是针对C\C++或者其他语言的程序员(delphi)转为使用C#的的工作人员,不适用指针觉得很别扭.下面介绍一下基础的指 ...

  10. ArcGIS for Android学习(一)

    GIS的开发中,什么时候都少不了地图操作.ArcGIS for Android中,地图组件就是MapView,MapView是基于Android中ViewGroup的一个类(参考),也是ArcGIS ...