瀑布流

引用：http://baike.baidu.com/view/7151782.htm

瀑布流是什么

　　瀑布流，又称瀑布流式布局。是目前比较流行的一种网站 页面布局，视觉表现为参差不齐的多栏布局，随着

  

瀑布流效果

页面滚动条向下滚动，这种布局还会不断加载 数据块并附加至当前尾部。最早采用此布局的网站是 Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

 

编辑本段瀑布流的应用

　　瀑布流对于图片的展现，是高效而具有吸引力的，用户一眼扫过的快速阅读模式可以在短时间内获得更多的信息量,而瀑布流里懒加载模式又避免了用户鼠标点击的翻页操作，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式，巧妙的利用视觉层级，视线的任意流动又缓解了视觉疲劳。 ^[1] 国内类Pinterest网站也如雨后春笋般出现，目前已知网站超40家，类Pinterest网站有三种，一是电商导购，如 蘑菇街和 美丽说，依托于 淘宝平台;二是兴趣图谱分享，如 知美、 花瓣等;三是在细分垂直领域，如针对吃货的零食控、针对家居行业的他部落、综合性中文网络社交平台的 海内论坛 ^[2] 等。

 

编辑本段瀑布流类型的网站特点

　　1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。

 

　　2、唯美：图片的风格以唯美的图片为主。

 

　　3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。

 

编辑本段瀑布流的实现方式

　　1、传统多列浮动。代表网站 蘑菇街和哇哦

 

　　2、用CSS3实现

 

　　3、绝对定位。代表网站Pinterest

 

编辑本段瀑布流布局的优点

　　1、布局简单，没有特别的难点；

 

　　2、不必明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。

 

编辑本段瀑布流布局的缺点

　　1、列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；

 

　　2、滚动加载更多数据时，还要指定插入到第几列中，不够方便。

 

　　3、只有高级浏览器中才能使用；

 

　　4、数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；

 

　　鉴于这些主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。

 

编辑本段常见的瀑布流网站

　　鼻祖：Pinterest ^[3]

 

　　通用类：花瓣网，我喜欢，读图知天下

 

　　美女图片：图丽网

 

　　时尚购物类：蘑菇街，美丽说，人人逛街

 

　　品牌推广类：凡客达人

 

　　社交论坛：海内论坛

 

　　家居o2o类：新巢网

 

　　微博社交类： 都爱看

 

 

 

参考资料

• 1．  Pinterest“瀑布流”背后的心理学 ．人民网[引用日期 2012-08-25]．

• 2．  海内论坛清新风格引领论坛发展新方向 ．搜狐[引用日期 2012-08-25]．

• 3．  Pinterest官网 ．Pinterest官网[引用日期 2012-08-20]．

扩展阅读：

• 1

  什么是瀑布流：http://www.icc6.com/meilishuo-mogujie/1205-pubuliu.html

• 2

  海内论坛http://www.hnlt.org/

开放分类：

前端开发， 瀑布流