源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-11-01 08:01 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样:   绝对定位:一个UL里面放置所有的绝对定位的LI;   浮动布局:多个(一般三四个)UL分布放置LI; 2.AJAX不一样   绝对定位:只需要将请求来的JSON数据(当然可以是别的格式的数据),插入到UL就可以了。然后再对这个新插入的LI进行TOP和LEFT设置;   浮动布置:是将请求来的JSON数据(当然可以是别的格式的数据),分别插入到对应的UL当中,因为有绝对定位,所以不用对LI设置位置。会自动向下排列; [b]一、功能分析: [/b]  1.定位每一个LI,即设置每一个LI的TOP和LEFT值;   2.将AJAX的数据,放在LI中,插入到UL当中; [b]二、实现过程:[/b]   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的列数,要设置列的总高度。这都是共公的,也是功能块,所以还是单独用函数写出来好;
[url=]//这里开始和浮动布局不一样了。其它部分在调用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下载[/url] (这个要在本地机器上安装服务器平台。我用的是PHP套装APPSERV,里面的是APACHE)
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部