5.1 瀑布流简介
最早采用瀑布流布局的网站是pinterest.com。pinterest（中文名：品趣志）是全球最大的图片社交分享网站，采用瀑布流的形式展现图片内容，无须用户翻页，新的图片不断自动加载在页面底端，让用户不断发现新的图片，良好的用户体验让它跻身全球社交网站前十，因此瀑布流布局得以被更多网站采用，成为新兴网站的首选。
5.1.1 瀑布流是不是万金油
国人自古就喜欢百宝箱之类的东西，现在这个概念被搬到网络上了，大全、集合、万能等常常现于眼帘，那么瀑布流是不是也是一种万能法宝呢？
在“瀑布流”网站布局被发明出来之后，这一亮瞎用户眼球的设计，在“以快致胜”思想泛滥的年代很快传开来，铺天盖地都是瀑布流，哪里都看得见。无论是新建的还是重构的，都以李白的瀑布挂前川，谁的网站要不挂点瀑布都不好意思见人，更有甚者，不让人滚到手抽筋丝毫没有罢休的意思，真是应了那句话——数据不止，折腾不休。可是，成功不是人人可以复制的。仅凭一个“瀑布流”真的就能让你的网站“永垂”不朽吗？
“瀑布流”布局方式通过JavaScript编写的插件密集、美观地展示了大量高度不一的缩略图，从而为用户提供完美的视觉体验。这种不平衡和不对称的布局方式对于那些以新闻聚合以及大量文本为主要设计方向的网站并不适合，比如Digg（如图5-1所示）。
图5-1 曾一度辉煌的Digg
作为一个新闻文章网站，通常都是对网站整体布局密度进行优化，从而突出新闻标题以增强可读性。改版后的Digg过分强调视觉效果，对新闻内容大打折扣。而且，网站上的配图也谈不上特别美观，反倒显得有些杂乱。Digg改版后的Alexa排名也说明用户对它的新设计并不买账，曾经一度辉煌到2亿美元身价的Digg，如今已跌至千万级别，这不得不令人深思——再炫、再流行的技术都不是重点，重点是如何服务用户。
从别人的成功可以迅速获得灵感，但也很容易忽略自己的设计重点。在打算采用“瀑布流”布局之前不妨问问自己下面几个问题：
● 你的网站内容是以视觉为主吗？
● 如果是，网站上的图片是否大小不一且足够有趣并吸引眼球？
● 你，是另一个pinterest吗？
● 盲目跟风的项目会成功吗？
5.1.2 穿过瀑布流看水帘洞
一种东西流行于世，必定有其优点，而任何东西都不可能绝对完美无瑕，必然有其缺点，只是有的多有的少。下面以这种辩证的眼光来看看瀑布流的优点和缺点。
瀑布流有这样几个优点：
● 相对于它出现以前，是一个创意的网页设计配合上独特的数据呈现方式；
● 从本质上来看它优化了翻页和等待翻页这种最常见的用户操作体验；
● 它适应了触屏设备的用手指滑动的操作习惯。
瀑布流的不足之处在于：
● 它仅仅是整个Web项目中的一部分，无法代替整个网站；
● 它只是内容的一种组织方式，绝对不是唯一的组织方式；
● 它容易造成“无限拖”和“无底洞”的不良后果，也就是说就像用户面对中国股市一样——很难见底。
从好的方面来看，它所带来的交互便捷性可以使用户将注意力更多地集中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览内容当中。
从它不足的地方来思考，有些行业或项目应当避免，从头望不见底，无穷无尽地拖曳操作——因为有些时候用户不可能永远看你的瀑布，最多几页就需要点击查看详情。例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确地回到某个特定的列表页面当中。另外需要考虑页脚对于你的网站，特别是用户的重要性。如果页脚中确实有比较重要的内容或链接，比如最常见的“联系我们”“关于我们”等信息，那么最好换一种更传统和稳妥的浏览方式。
下面来看看几个对瀑布流应用处理得比较好的案例——Twitter和Tumblr。
2006年，博客技术先驱blogger.com创始人埃文·威廉姆斯（Evan Williams）创建的新兴公司Obvious推出了Twitter服务。Twitter适合采用无限滚动加载的一个重要原因，就是每个内容单元都短小精炼，其本身就是内容整体，用户不需要在“列表索引”与“内容详情”之间切换就可以获取全部信息，而且当鼠标悬停在某个内容条目范围内的时候，对应的操作（回复、删除、收藏等）就会呈现，所有内容与功能全部集中在当前的上下文环境中，如图5-2所示。
图5-2 Twitter推文的无限滚动
Tumblr（中文名：汤博乐）成立于2007年，是目前全球最大的轻博客网站，也是轻博客网站的始祖。默认情况下，Tumblr是通过无限滚动的方式加载内容的，但在设置当中为用户提供了禁用无限滚动的选项，这种做法非常体贴，如图5-3所示。
图5-3 Tumblr首页及是否关闭瀑布流的无限滚动设置
通过瀑布流我们需要挖掘出更大的财富——洞天福地般的水帘洞，如果你的瀑布流背后只是给游客一面光秃秃的墙，游客迟早都会看腻或者因碰壁而离开，而不会成为花果山。