jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)


Posted in Javascript onMay 23, 2012

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

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)

DEMO下载 (这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV,里面的是APACHE)
Javascript 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
一个可绑定数据源的jQuery数据表格插件
Jul 17 Javascript
详谈jQuery中的this和$(this)
Nov 13 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 #Javascript
Javascript 面向对象(三)接口代码
May 23 #Javascript
Javascript 面向对象(二)封装代码
May 23 #Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
May 23 #Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 #Javascript
基于jQuery的图片左右无缝滚动插件
May 23 #Javascript
判断多个input type=file是否有已经选择好文件的代码
May 23 #Javascript
You might like
PHP新手入门学习方法
2011/05/08 PHP
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
js实现自动播放匀速轮播图
2020/02/06 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
Python实现时钟显示效果思路详解
2018/04/11 Python
一看就懂得Python的math模块
2018/10/21 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
python suds访问webservice服务实现
2020/06/26 Python
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
技校生自我鉴定范文
2013/09/26 职场文书
如何进行有效的自我评价
2013/09/27 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
公司股权转让协议书
2014/04/12 职场文书
网络优化专员求职信
2014/05/04 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
学生退学证明
2015/06/23 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android