参考:http://test.yvlou.com/?p=74
瀑布流式布局在很多地方都能看到了,pinterest(pinterest.com)上有很棒的瀑布流布局。可以通过如下方法实现一个瀑布流式布局。
(参见瀑布流式布局Demo,图片来自pinterest~~)
- 每个流的宽度是相同的,记为w,显然每个元素的高度是不一定相同的。
- 根据屏幕的宽度和w得到流的列数,记为column。
- 每列的初始高度为0。
- 找到当前最短的列i,把新的元素排到第i列,并更新列i的长度(把元素的高度加上即可)。
- 重复4直到排列完成所有的元素。
重新排列,重新排列发生在显示区域的宽度发生变化的时候,比如当变窄时候,元素就会被挤到下面去。那么如何实现重新排列呢?其实很简单,只要按照刚刚的方法重新计算一遍,就可以得到新的位置了,区别仅仅在于参数column发生了变化。不过这个还不够酷,在尝试加上一些动态效果。一种可行的方法就是让元素块从原来的位置移动到新的位置,这样看起来就像自适应的布局了,而且效果不错。
在实现中,可以通过Ajax从后台读取数据,通过js设置元素的位置来进行布局,并且绑定resize事件的处理函数,动画效果可以使用jquery的animate,使用jQuery实现了一个简单的demo,参见 http://aftercake.com/demo/,调整窗口大小可以进行重新排列。当然了,有很多插件可以实现更强大的功能~~,比如
http://masonry.desandro.com/,以后就只需要写几行代码了。。。