瀑布流

瀑布流是什么

　　瀑布流，又称瀑布流式布局。是目前比较流行的一种网站 页面布局，视觉表现为参差不齐的多栏布局，随着 页面滚动条向下滚动，这种布局还会不断加载 数据块并附加至当前尾部。最早采用此布局的网站是 Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

编辑本段瀑布流的应用

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

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

　　1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。 　　2、唯美：图片的风格以唯美的图片为主。 　　3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。

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

　　1、传统多列浮动。代表网站 蘑菇街和哇哦 　　2、用CSS3实现 　　3、绝对定位。代表网站Pinterest

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

　　1、布局简单，没有特别的难点； 　　2、不必明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。

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

　　1、列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列； 　　2、滚动加载更多数据时，还要指定插入到第几列中，不够方便。 　　3、只有高级浏览器中才能使用； 　　4、数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了； 　　鉴于这些主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。

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

　　鼻祖：Pinterest ^[3] 　　通用类：花瓣网，我喜欢，读图知天下 　　美女图片：图丽网 　　时尚购物类：蘑菇街，美丽说，人人逛街 　　品牌推广类：凡客达人 　　社交论坛：海内论坛 　　家居o2o类：新巢网 　　微博社交类： 都爱看