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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
功能强大的Bootstrap使用手册(一)
Aug 02 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 Javascript
JS实现星星海特效
Dec 24 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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入门速成教程
2007/03/19 PHP
php防止sql注入简单分析
2015/03/18 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
php封装的page分页类完整实例
2016/10/18 PHP
CI框架中类的自动加载问题分析
2016/11/21 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
2018/07/30 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
Python实现对比不同字体中的同一字符的显示效果
2015/04/23 Python
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python实现kNN算法
2017/12/20 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
宿舍保安职务说明书
2014/02/25 职场文书
教研活动总结
2014/04/28 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
先进党支部事迹材料
2014/12/24 职场文书
毕业实习指导教师评语
2014/12/31 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
活动总结模板大全
2015/05/11 职场文书
初婚未育证明样本
2015/06/18 职场文书
python如何读取.mtx文件
2021/04/22 Python
java泛型通配符详解
2021/07/25 Java/Android
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript