瀑布流布局

 

瀑布流又称瀑布流式布局，是一种比较流行的页面布局方式，专业的英文名称为[ MasonryLayouts]。与传统的分页显示不同，视觉表现为 参差不齐的多栏布局，最早是由Pinterest首先运用。

 

无图无真相：

 

如图所示，网页上呈现 参差不齐的多栏布局，图片 等宽不等高，根据图片原比例缩放直至宽度达到固定的要求，每行排满后，后面的元素依次添加到其后，视觉上显得错落有致不拘一格。

 

瀑布流的优点

 

优点如下：

 

节省空间，外表美观，更有艺术性。

 

对于触屏设备非常友好，通过向上滑动浏览

 

用户浏览时的观赏和思维不容易被打断，留存更容易。

 

从体验的心理讲，女性是一种逛街数小时都不需要停歇的生物，一眼望不到头的瀑布流契合了这种心理。瀑布流的图片就像商品，就像逛街、就像扫货。女性只要不断往下拉伸页面，就像置身在一条没有尽头的购物街，没有层高限制的商场中一样。传统布局中的下一页就是打断，好比男朋友轻声在耳边说了句：休息一下吧，我累了……结果不言而喻——

 

瀑布流的缺点

 

缺点如下：

 

用户无法了解内容总长度，对内容没有宏观掌控。

 

用户无法了解现在所处的具体位置，不知道离终点还有多远。

 

回溯时不容易定位到之前看到的内容。

 

容易造成页面加载的负荷。

 

容易造成用户浏览的疲劳，没有短暂的休息时间。

 

瀑布流的适用场景

 

根据瀑布流的优缺点，我们不难得出在什么情况下选择瀑布流是合理的选择：

 

内容以图片为主的时候，瀑布流是更好的选择。图片占用空间比较大，并且大脑理解的速度相比理解文字要快，短时间内可以扫过的内容很多，所以如果用分页显示的话用户务必会频繁的翻页，影响沉浸式的体验，而瀑布流可以解决这个问题。

 

信息与信息之间相对独立时，瀑布流是更好的选择。如果信息关联性强，用户务必会进行大量的回溯操作去查看之前或者之后的信息，相反，如果信息相对独立的话，可以使用瀑布流，让用户同时接受来自不同地方的信息。

 

信息与搜索匹配比较模糊时，瀑布流是更好的选择。瀑布流给人的直观印象，就是同时显示的信息与用户搜索的匹配度大致一样，而分页显示的直观印象则是越靠上的信息被认为与用户的搜索越匹配。因此，当信息与搜索匹配度没有明显区分度时，可以采用瀑布流。

 

用户目的性不强的时候，瀑布流是更好的选择。如果用户有特定需要查找的信息，分页查找定位更方便，而当目的性较弱的时候，瀑布流可以增加用户停留的时间和意想不到的收获。

 

multi-column 多栏布局实现瀑布流

 

通常 Multi-column用于文本的分列：

 

.container { column-count: 3;}

 

multi-column布局中子元素的排列顺序是先 从上往下再从左至右。

 

根据这个特性，我们就可以用来实现 瀑布流。

 

multi-column实现 瀑布流主要依赖以下几个属性：

 

column-count: 设置共有几列

 

column-width: 设置每列宽度，列数由 总宽度与 每列宽度计算得出

 

column-gap: 设置列与列之间的间距

 

column-count和 column-width都可以用来定义分栏的数目，而且并没有明确的优先级之分。优先级的计算取决于具体的场景。

 

计算方式为：计算 column-count和 column-width转换后具体的列数，哪个小就用哪个。