雨夜带刀

之前有写过一篇非等宽图片列表的布局的博文，那只是这种布局之前的叫法，为了和常规的等宽瀑布流布局做区分，根据这种布局的特性（整行是等高的），那么就叫等高瀑布流布局吧。

怎么又拿这种布局出来说事？最近几天在对以前开发的360图片搜索结果列表页的图片尺寸和交互效果做一些细节上的调整。同时也对布局的算法做了优化，之前采用的是以宽度裁切为主和夹杂着一些等比缩放的算法，当时是为了让每一行看起来高度都一致。由于宽度裁切的效果会让图片左右边缘部分有损失，而且当时也有图片 hover 时的放大效果在一定程度上弥补了这种损失。这次放弃了宽度裁切，也去掉了 hover 时放大图片的效果，全部采用了等比缩放的算法。

在上一篇博文中谈到的等比缩放的算法其实并不是最优的，还是会有一定的上下或者左右的裁切。研究了一下 Google+ 的相册使用的等高瀑布流布局的缩放，发觉还有一种更优的缩放计算的算法，于是花了两个小时将这种算法推演了出来。这里先检讨下，由于智商上的缺陷，数学绝对是我的弱项，这种算法比之前的要简单得多，之前是走了弯路了。

Pinterest 当时的成功，在国内掀起了一股瀑布流的潮流，但很多国内的网站仅仅只学会了使用瀑布流的布局方式，却没有看到 Pinterest 成功背后的模式。页面的布局方式仅仅是一个壳，瀑布流的布局方式也最多算是一个漂亮的壳。如果没有实质性的内容，光有壳就只能让用户图个新鲜。就好比帅哥美女仅仅是外表漂亮，而没有内涵和气质一样。

瀑布流展现的内容通常是扁平化、琐碎的东西，首先吸引人的应该是图片，如果瀑布流中文字过多，只会给人很杂乱的感觉，所以瀑布流更适合单纯的图片浏览。

最近公司的项目–360图片的美女秀场，就用到了瀑布流的布局方式，这种纯粹的看美女图片的页面用瀑布流还是挺合适的。

以前并未开发过瀑布流布局的网站，第一个想到的实现方式就是多列浮动，从表面上看这种方式要简单。

传统的定位布局方式

但是，目前主流的瀑布流布局都是采用定位的方式，对每个单元格计算定位值，如下图：