Javascript 瀑布流式布局及其动态效果的实现

参考：http://test.yvlou.com/?p=74

瀑布流式布局在很多地方都能看到了，pinterest(pinterest.com)上有很棒的瀑布流布局。可以通过如下方法实现一个瀑布流式布局。

(参见瀑布流式布局Demo，图片来自pinterest~~)

 

1. 每个流的宽度是相同的，记为w，显然每个元素的高度是不一定相同的。
2. 根据屏幕的宽度和w得到流的列数，记为column。
3. 每列的初始高度为0。
4. 找到当前最短的列i，把新的元素排到第i列，并更新列i的长度（把元素的高度加上即可）。
5. 重复4直到排列完成所有的元素。

重新排列，重新排列发生在显示区域的宽度发生变化的时候，比如当变窄时候，元素就会被挤到下面去。那么如何实现重新排列呢？其实很简单，只要按照刚刚的方法重新计算一遍，就可以得到新的位置了，区别仅仅在于参数column发生了变化。不过这个还不够酷，在尝试加上一些动态效果。一种可行的方法就是让元素块从原来的位置移动到新的位置，这样看起来就像自适应的布局了，而且效果不错。

在实现中，可以通过Ajax从后台读取数据，通过js设置元素的位置来进行布局，并且绑定resize事件的处理函数，动画效果可以使用jquery的animate，使用jQuery实现了一个简单的demo，参见 http://aftercake.com/demo/，调整窗口大小可以进行重新排列。当然了，有很多插件可以实现更强大的功能~~，比如

http://masonry.desandro.com/，以后就只需要写几行代码了。。。

评论

1 楼 coding1688 2013-01-16  

博主说的不错，我在实现瀑布流布局时也用的masonry插件，有兴趣的可以看看：四步轻松搞定瀑布流布局http://www.vktone.com/articles/waterfall-layout-use-jquery-masonry.html