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正确获取元素样式详解
Aug 07 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
用JS在浏览器中创建下载文件
Mar 05 Javascript
深入分析原生JavaScript事件
Dec 29 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
windows下更新npm和node的方法
Nov 30 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
Aug 25 Javascript
vue-cli安装使用流程步骤详解
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
JAVA/JSP学习系列之四
2006/10/09 PHP
php获得文件扩展名三法
2006/11/25 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php可变长参数处理函数详解
2017/02/22 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
2013/09/10 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JavaScript显示表单内元素数量的方法
2015/04/02 Javascript
jQuery添加删除DOM元素方法详解
2016/01/18 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
卫校毕业生自我鉴定
2013/10/31 职场文书
大学自主招生自荐信范文
2014/02/26 职场文书
手机银行营销方案
2014/03/14 职场文书
2015年教师新年寄语
2014/12/08 职场文书
三峡导游词
2015/01/31 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技