jQuery-瀑布流 布局 (处理页面滚动和AJAX加载延迟问题)
瀑布流:这种布局适合于小数据块,每个数据块内容相近且没有侧重。通常,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。
一、功能分析:
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加载延迟问题)的更多相关文章
- Jquery滚动到页面底部自动Ajax加载图文列表,类似图片懒加载效果,带加载效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- AngularJS 实现页面滚动到底自动加载数据的功能
要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...
- AngularJS:实现页面滚动到底自动加载数据的功能
要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序ht ...
- Jqeury Mobile实战之切屏效果以及屏幕滚动到底端加载更多和点击切换更多
http://blog.csdn.net/q718330882/article/details/46120691 //页面滚动到底部加载更多事件 $( window ).scroll(function ...
- 用 jQuery Masonry 插件创建瀑布流式的页面(转)
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- 用 jQuery Masonry 插件创建瀑布流式的页面
瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...
- jQuery瀑布流插件——jQuery.Waterfall
插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- jQuery瀑布流从不同方向加载3种效果演示
很实用的一款插件jQuery瀑布流从不同方向加载3种效果演示在线预览 下载地址 实例代码 <section class="grid-wrap"> <ul clas ...
随机推荐
- Single NumberII
**一定要注意 == 运算符的优先级高于& 因此在条件判断的时候 必须加括号 class Solution { public: int IsBit1(int num, int place) { ...
- ping网络故障
网络的应用已渐渐深入我们的工作和生活,它带给了我们各方面的便利.因此,这种种的便利致使很多人对网络产生依赖性.那么,当电脑不能上网时,我们如何才能准确地判断电脑问题出在哪里?又如何能快捷地解决这故障? ...
- 自动工作负载库(Automatic Workload Repository,AWR)
自动工作负载库(Automatic Workload Repository,AWR)AWR的由来: 10g之前的oracle:用户的连接将产生会话,当前会话记录保存在v$session中:处于等 ...
- 【水:最长公共子序列】【HDU1159】【Common Subsequence】
Common Subsequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- SerialPort
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...
- jQuery ZeroClipboard中Flash定位不准确的解决方案
转自波斯马,原文地址<jQuery ZeroClipboard中Flash定位不准确的解决方案> jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE.Fire ...
- myql 注意事项
在[mysqld]下加入一行:lower_case_table_names=1,1为不区分大小写,0是区分大小写...并/etc/init.d/mysql restart即可...
- 《C++ Primer Plus 6th》读书笔记 - 第九章 内存模型和名称空间
1. 单独编译 1.1 头文件中常包含的内容: 函数原型 使用#define或const定义的符号常量 结构声明 类声明 模板声明 内联声明 1.2 只需将源代码文件加入到项目中,而不用加入头文件.这 ...
- mysqli扩展库的 预处理技术 mysqli stmt
问题的提出? 现在需要向mysql数据库添加100个用户,请问如何实现? 思路: 使用for循环100次,向数据库中添加100个用户. 使用批量添加 $sql1=”insert xxx”; $ssql ...
- debian install & configure(2)-drivers-ati
依赖apt-get install build-essential cdbs fakeroot dh-make debhelper debconf libstdc++6 dkms libqtgui4 ...