这两年 Pinterest 推出的瀑布流布局大热，模仿者如雨后春笋一般。但我一直觉得，如果真想看东西，这种布局其实不是很方便。比如，下面是花瓣网的截图（因为 Pinterest 网站似乎被半墙了，在国内很难打开，所以我就用 Pinterest 的忠实山寨者花瓣网做例子了），你觉得有问题吗？

布局一

布局一

这种瀑布流的特点是，图片的宽度固定，纵向高度不固定，有多长就拖多长，后面的图片就接在下面显示。因为图片的高度不固定，所以各行的高度是参差不齐的，甚至可以说，就没有行的概念。

这种瀑布流布局遇上现实的限制，会出现什么情况呢？现实中屏幕大小是有限的，不可能一屏把所有图都显示完，那么显示不完的图会怎么样呢？从上面的截图可以看到，最下面的图，有的只露了一个头，有的显示了一半，有的正好整个图都能显示完。

在这种布局的网页上看东西总让我很纠结，我到底是应该横着看还是竖着看呢？横着看的话，各列的行高都不一样，有的列一张图抵得上别的列好几张图的高度，我的视线得一会上一会下，总得找我看到哪行了，没法一行一行好好看。竖着看的话，我看完这列要把网页拉到最下面，然后看第二列我再把网页拉到最上面从头看？然后再拉到最下面，如此反复？总之不管怎么看都很别扭。

布局二

我觉得，既能够灵活适应不同比例的图片、又不会让我总得上下调整视线高度的布局应该是这样的：依然是宽度固定，纵向高度不固定，但更多的图片不是接在下面显示，而是在右边显示。也就是说，相当于只有一行，一直往右延伸。我要看更多的图，就一直往右拉就行了。

这种布局的缺点是，我们现在的电脑一般都是为了纵向滚动配置的，键盘上有 PageDown，鼠标有滚轮，都方便向下翻页。向右翻页就没这么方便了。所以，这种布局在电脑上恐怕是难以普及。

但是，手机、平板等手持设备就没有这种问题了。在手机上，上下拉动屏幕来看本单元的内容，左右滑动查看下一单元的内容，是非常方便也非常常用的做法。腾讯微博 Windows 8 版的时间轴设计就采用了类似的布局，让人眼前一亮（如下图所示）。

布局二

布局三

那么，在电脑上应该怎么办呢？鉴于目前键盘鼠标的搭配很难发生大的变化，妥协之下，我觉得适应电脑的布局应该是纵向高度固定，横向宽度不固定（但不能超出一屏的长度）。大体相当于把现在的瀑布流旋转 90 度，但略有不同。我做了一个粗略的效果图，如下：

布局三

页面总宽度根据屏幕（浏览器）大小自适应，大的就一行多显示几张，小的就一行少显示几张。这行显示不下就转到下一行。每一行的宽度参差不齐，但行高一致。想看更多，就一直往下拉页面。这样，我可以横向扫视与纵向滚动页面相结合，视线一直很舒服，不用总是上下找我看到哪了。

布局四

做完效果图，我又回头看了看瀑布流效果，不得不承认，如果不认真看内容，只是全屏幕扫一眼的话，瀑布流（布局一）比我提出的布局（布局三）要好看，瀑布流的结构更满满当当、四平八稳，也许这正是它流行的原因。但是，如我前面所说，如果真心想看东西，想高效率地、不重复无遗漏地把所有图看一遍，瀑布流布局确实不适合。

另一种布局能够做到每一行的总宽度一致，每一行内部的高度也一致，但各行之间的高度则不一样（见下图）。

布局四

这种布局大体的思路是先把当前这一行的图片按比例缩放到高度一致，然后把总宽度缩放到设定的页面宽度，总高度按照同样比例缩放，得到多少就是多少。因为各张图片本身大小不一致，所以每行得到的总高度也会不一致。

Google 图片搜索结果、Google+ 的相册、Flickr 某些页面采用了这种布局，Flickr 还提供了一个开源的 JQuery 插件。

这种布局扫视效率也很高，而且也做到了结构满满当当、四平八稳，视觉效果很美观。我甚至感到不解，为什么这种布局竟然没有瀑布流流行？

我能想到的唯一缺点是这样：其他几种布局，都能在图片旁边放些文字，标题啊评论啊之类的东西。而布局四呢，因为每张的图片的高度和宽度都不固定，导致文字的排版很难设计。同样的文字，在这张图旁边能显示得下，在那张图旁边就要撑破框框了，这让设计师很难办。Google 和 Flickr 的几个页面都是只有图，没在图片旁边显示文字，显然并非偶然。当然，有些情况不需要在图片显示文字，或者也可以采用鼠标悬浮显示文字等办法来绕过，但是，这个缺点无疑限制了布局四的使用范围。

附注

现在，因为瀑布流布局很流行，有些人会把多张图纵向拼接起来，做出一种非常细长的图（如下图）。显然，这种图在后三种布局下显示效果不会好，会变成极为狭长的一条，什么都看不清。我希望不要因为这种图的存在而否定后三种布局，因为这种图的比例并不是自然的比例，而是特意为了适应瀑布流布局而产生的。一般相机的比例是 2:3、3:4 之类，常见的图片也是如此，不管是横着还是竖着，比例都不会太夸张。如果要拼接，在后三种布局下，应该用横向拼接或者四格、九宫式的拼接。

你的看法呢？

你可能感兴趣：