位置: 编程技术 - 正文
jquery实现简单的瀑布流布局(jquery技巧)
发布时间：2024-02-27推荐整理分享jquery实现简单的瀑布流布局(jquery技巧)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery使用教程,用jquery,jquery的实现原理,用jquery,jquery技巧,使用jquery实现的项目,jquery技巧,jquery实战,内容如对您有帮助，希望把文章链接给更多的朋友！
是开头都会说的原理
瀑布流布局有两种，一种是固定列，一种是非固定列。在此主要记述第一种的实现。
固定列的特征是：无论页面如何缩放，每行的总列数都一致。
一行4列的瀑布流从布局的角度来说，就是4个li标签。通过一定的事件（比如滚动条滚动多少px），然后读取之，再把数据动态地添加到页面中。
添加数据原则，不是根据li索引值来加，而是根据各列中高度最短的的那列动态添加。否则可能导致页面很难看（左右高度不统一）。
实例涉及ajax方法。可在服务器环境下运行。
废话不多说了。直接上样式。
css
基本效果如图：
样式显示没问题之后，就把li里面的代码删掉。
接下来通过ajax来动态添加。
数据哪里来？
这里用的是wookmark的数据接口。
false(只能等)。
getList一开始就把bCheck设为false（如厕前先锁门）。等到getList回调函数执行到尾声。再把bCheck设为true（开门）。
这一段不贴代码了。
总有流完的一天。
当数据结束时（所有人上完厕所），就没有必要再进行加载了（自动把门锁上）。
所以在getJSON回调函数内锁门之后发现进来的是个空数组，那就进行判断，当获取到data的length为空时，直接returnfalse。那么bCheck就永远关上了。
全部代码如下：
标签: jquery技巧
本文链接地址:https://www.jiuchutong.com/biancheng/376259.html 转载请保留说明！
