创意且实用的两种布局

去年很早就看到过Pinterest这种布局。有人称之为瀑布流布局,有人称之为格子堆砌布局等。刚开始看到这样的页面,就被他那漂亮的图片和网站风格所吸引,有非常强的视觉冲击。如今这种布局已有很多网站效仿,多用于新闻,设计,产品,图片展示等。可见这种布局是非常受欢迎的。
今年元月十号,豆瓣猜新版首页上线。豆瓣猜是通过算法自动推荐给你的个性化内容。新版的布局很有创意,虽然没上述的布局那么强的视觉冲击,但每天通过3种类型的格子进行排列,图文并茂,简洁而大方。这是豆瓣的风格。
一直觉得瀑布流这种布局实现起来很简单,没亲自动手写过,今天趁此机会简单实现一下。我的思路跟Pinterest不同,我是先分好六列,然后在插入元素的时候比较每列的高度,新创建的元素插入到最矮的那一列中,完整代码:

提示:你可以先修改部分代码再运行。

在写代码过程中,刚开始获取高度我用的是计算样式,后来想想offsetHeight也行。觉得offsetHeight应该性能上快一点吧,便去jsPerf上做了个比较,结果后者比前者快了250倍左右(火狐9.0),http://jsperf.com/getheight