jquery实现简单的瀑布流布局(jquery技巧)

推荐整理分享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就永远关上了。

全部代码如下：