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 multiple全选与取消全选实现代码
Dec 04 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
详解JavaScript基于面向对象之创建对象(2)
Dec 10 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
详解webpack分包及异步加载套路
Jun 29 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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动态生成JavaScript代码
2009/03/09 PHP
php实现jQuery扩展函数
2009/10/30 PHP
php cli 方式 在crotab中运行解决
2010/02/08 PHP
PHP中的string类型使用说明
2010/07/27 PHP
PHP合并discuz用户脚本的方法
2015/08/04 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP使用curl_multi实现并发请求的方法示例
2018/04/29 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
js 自定义个性下拉选择框示例
2013/08/20 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
JavaScript按值删除数组元素的方法
2015/04/24 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
2017/08/04 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python常用库推荐
2016/12/04 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python设计模式之解释器模式原理与用法实例分析
2019/01/10 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
Python list运算操作代码实例解析
2020/01/20 Python
CSS3实现滚动条动画效果代码分享
2016/08/03 HTML / CSS
MSC邮轮官方网站:加勒比海、地中海和世界各地的假期
2018/08/27 全球购物
入党积极分子自我鉴定
2014/02/18 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs