“模板法”学习类pinterest瀑布流的前端实现

如今类Pinterest网站越来越多，瀑布流越来越火，不过对我们这些前端来说，瀑布的实现方式才是我们最关心的。就目前来说，我认为主要是下面两种：

• 固定列数的多列浮动（蘑菇街等网站），这种方式列数一般固定，呈现良好，浏览器解释起来比较轻松
• 绝对定位与相对定位结合（pinterest等网站），动态计算列数，可把显示信息量最大化，频繁变换显示区域时，浏览器有时会比较吃力

向来对比较新的东西感兴趣，今天结合一套wordpress模板学习第二种实现方式。

首先说明一下自己曾经对定位问题产生过的误解：absolute的英文意思是绝对的意思，但在实际中是针对父级元素元素定位，如果父级元素没有position:relative|absolute，则追至再上一个父级元素，直至相对于文档的左上角定位，因此，千万不能默认absolute是相对于页面左上角进行定位，这样会大大埋没absolute的功能和用途。

我每次看到一种新奇的布局都会在网上找类似的wordpress模板，这样学习时，既可以直观地查看显示效果，也可以修改代码后，看效果，屡试不爽，呵呵。今天找的这套wordpress模板名称叫imbalance-2（文章末尾有下载地址），它利了jQuery的Masonry插件来实现瀑布流，Masonry是一个基于jQuery的页面布局插件。先来看看输出到前台的代码吧

 

数据块中的style是由javascript动态生成的，这也说明，浏览器在得到页面中的各个元素的大小以后，依次取容器中的所有数据块，先寻找当前高度最小的某列，之后根据列序号，确定数据块的left，top值，left 为所在列的序号乘以列宽，top 为所在列的当前高度，最后更新所在列的当前高度加上这个数据块元素的高度，至此，插入一个元素结束，然后依次再把所有需要显示的数据块排列整齐。当然，这个过程是由masonry内部完成的。

还有一个重要的部分是加载数据，当用户需要瀑布向下流动的时候，就需要对更多的数据块实现异步加载并重新布局。加载的触发事件可是滚动到页面底部，也可是点击加载按钮（本模板采用的方式）等等。当数据加载时，数据块照上述过程呈现，数据显示区域#boxes就会重新计算高度。

用wordpress的园友们可以一起研究一下这种瀑布流，这可能是目前比较好的瀑布流了。说了半天，这里有imbalance-2的下载地址。