瀑布流分析

引用：http://www.cnblogs.com/rubylouvre/archive/2012/04/18/2455222.html

很难说这东西是什么时候山寨到国内，反正现状就是一涌而上，到处是瀑布流。瀑布流的鼻祖是Pinterest，图片网。图片网令我想起了各种相册，如最著名的Flickr。但区区Pinterest一小站，能够独行特立，引领潮流，可见创新的力量。

snatchly.com 最棒的瀑布流 不解释

瀑布流有两大元素，图片与无限拖。图片要力求鲜丽夺目，毕竟它的每一张图片就是一个广告。因为瀑布流就是一个广告墙，琳琅满目的广告，铺天盖地的广告。我们也不管这些广告是否互相干扰，反正它的本意就是给人一种逛街的感觉，因此这些网站的站名起得也很贴切，什么“蘑菇街”，“美丽说”，“发现啦”，或干脆叫“逛”！这些网站基本上是导购网站，面向的是女性用户，吸引眼球是非常重要的。为了保证图片质量，仅靠图片色度的分析算法是不行，人网推荐势在必行，我不相信，仅靠用户上传，“花瓣网”首页的图片质量能高成这样。

无限拖让我想起twitter，通过滚动不断加载新内容。不停的是改成“砖头”——瀑布流里面一块块的东西，以图片为中心。相应的技术也早已成熟，就叫scrollLoad，或叫lazyload。由于图片高度不一，砖头也高度不一，添加砖头还是需要一点技巧的。现在流行栏栅布局（相对CSS框架而言），因此瀑布流其实是分为几列的，每次添加砖头时，都往最短的那一列添加，以保证某一列不会太长，而另一列只有几块砖头。有关瀑布的注意问题，我在后面会说，现在大家先欣赏一下美图吧。

淘宝网

http://www.fengche.com/

三列，不过每块砖头含有多个图片。发出两次请求就必须通过点击才能加载更多砖头，这难道是出于节省流量的考量吗？脑残！失去了无限拖的爽快感了。

迷尚

http://www.mishang.com/

四列。发出三次请求出现分页栏，点击后回到顶端。没有注册或登陆，拖着拖着会出现弹出层提示注册或登陆，这有点像无良发廊，在理发时不停地问你办会员卡，你理得好自然会办！总之，这种行径就是恶心！我倒不知那PM是不是吃屎长大，连这么简单的道理也不知！

发现啦

http://faxianla.com/

自适应布局。经典的无限拖。会出现很长的图片。拖着拖着，还会在右下角出现一个标签云作推荐。没有注册或登陆，拖着拖着会出现弹出层提示注册或登陆，因此这PM也是吃屎长大的！类库采用KISSY与seajs，其他有jQuery的垃圾网有技术含量。注意灯箱效果时，后面的瀑布流还能缓缓流动。

知美

http://www.zhimei.com/

无限拖。能根据屏幕大小调整列数。个人感觉太密，与圈乐一样。它的loading，与发现啦，堆糖都是很有意思。

堆糖

http://www.duitang.com/

四列。发出十次请求后出现分页栏。砖头有很质感。

花瓣

http://huaban.com/

五列。并且将一个标签云作为瀑布流的第一块砖头放在左上角，有效利用空间。会出现很长的图片。无限拖。图片质量超高。里面包含的资讯比像其他瀑布流丰富多了！找不到明显的缺点，是我们学习的榜样。

拼范

http://www.pinfun.com/

最多六列，最小四列，视屏幕而定。如果图片还没有加载到时，会出现一段文字，让用户先看赏析。基本上没有什么缺点，就有六列时有点密，在我的1440*900下。

美丽说

http://www.meilishuo.com/

五列。没有注册或登陆，拖着拖着会出现弹出层提示注册或登陆，恶心。发出三次请求后出现分页栏。

萌胡同

http://www.menghutong.com/

五列。没有注册或登陆，拖着拖着会出现弹出层提示注册或登陆，恶心。没有发出请求。砖头都是PHP拼好放在页面上。通过点击分页栏呈现另一个瀑布。

蘑菇街

http://www.mogujie.com/

四列。没有注册或登陆，和上面的一个毛病，抄人家的，缺点也照搬了，与TX新闻客户端一个德性。发出8次请求后出现分页栏。

贝壳网

http://www.buykee.com/

四列。数据有限，总是让人看到页尾，非常不爽。

开心品集

http://jipin.kaixin001.com/

五列。无限拖。在自适应上处理得非常好。

推他

http://www.tuita.com/

为什么不叫“推她”？！四列，无限拖。个人很喜欢它那个top banner。一开始没有指定图片高宽，有严重的reflow。是传说中的“轻微博”……

爱采图

http://jipin.kaixin001.com/

六列。砖头非常简洁。

91美图网

http://www.91meitu.net/

尽是美女的瀑布流，中国最有前途的瀑布流! 内容为王，其他都是虚的！

---

蛋花儿

http://danhuaer.com/

扇贝

http://www.shanbei.com/

新版百度空间

http://hi.baidu.com/new/ncpjyw

优化建议：

• 瀑布流就是广告流，无尽的广告，图片的质量必须高。为了绿叶衬红花，网页的背景正如各位看客所见，基本上使用奶白色，搭什么也好看。当然你也可以像那样使用一个地板图片做背景，很有人文气质哦！
• 出于自适应布局的需要，页眉与页尾不如出现复杂的UI，比如弄个图片轮播。图片轮播的目的就是做广告，瀑布流也是一堆广告，有见过为广告做广告的吗？！而且这也不好实现自适应。
• 自适应无异乎是监听resize事件，但不能一resize就调整瀑布流，应该存在一个阀值。
• 使用绝对定位方式搬砖头太复杂了，对瀑布流的自适应尤为不利。应该用几个DIV作为列的容器，通过浮动方式构建瀑布。
• 虽然我们可以通过complete知道图片是否加载成功，并据此进行下一次砖头的插入操作，但还要考虑浏览器的reflow问题。实践中，遇到mac safari这样的SB浏览器，性能严重不济，因此还是叫高工资的后端人员多做一些活，提早把图片的高宽传给你吧。
• 瀑布流拖着拖着见底的问题，需要插入几块砖头后，人工干扰scrollTop的位置。
• 砖头是广告的载体，不应该把太多功能，至少不能让人一下子看到这么多东西，以免哗宾夺主。如果人们就是无限拖，没有停下来欣赏图片的话，说明这些广告做得太失败了！从技术层面来说，砖头的DOM结构要尽量简单，毕竟是无限拖，能显示越多的砖头就越好，不能拖一下就卡死了。
• 图片应该大，换言之，重视广告的效果。这也意味着，用户的注意力不会一下子被过小的广告图打散。
• 列不能过密。本来就是玩密集效应，踩钢琴线的。
• 严重反感拖着拖着出现注册界面！
• 严重反感拖着拖着出现分页栏，这种“微创新”一无是处，打断用户持续的体验过程。有时我在想，分页栏的出现是不是让人们看一下底部那个备案内容啊……