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 相关文章推荐
Js 冒泡事件阻止实现代码
Jan 27 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
JavaScript表单焦点自动切换代码
Jul 24 Javascript
javascript中的深复制详解及实例分析
Dec 29 Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 Javascript
使用JSON格式提交数据到服务端的实例代码
Apr 01 Javascript
vue-dplayer 视频播放器实例代码
Nov 08 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 使用post,get的一种简洁方式
2010/04/25 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
CentOS安装php v8js教程
2015/02/26 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
复选框全选与全不选操作实现思路
2013/08/18 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue使用自定义icon图标的方法
2018/05/14 Javascript
动态内存分配导致影响Javascript性能的问题
2018/12/18 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
python函数参数*args**kwargs用法实例
2013/12/04 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
英国地毯卖家:The Rug Seller
2019/07/18 全球购物
资深生产主管自我评价
2013/09/22 职场文书
英语自荐信常用语句
2013/12/13 职场文书
安全温馨提示语大全
2015/07/14 职场文书
公司管理建议书
2015/09/14 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android