了解瀑布流布局

概述

瀑布流布局有一个专业的英文名称 Masonry Layouts。瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

瀑布流布局的核心是基于一个网格的布局，而且每行包含的项目列表高度是随机的（随着自己内容动态变化高度），同时每个项目列表呈堆栈形式排列，最为关键的是，堆栈之间彼此之间没有多余的间距差存大。

为什么使用瀑布流

瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个 APP 至上的时代，瀑布流可以提供很好的用户体验，通过结合下拉刷新，上拉加载进行数据的懒加载等操作，对于用户的体验感来说是接近于满分的！

实现方式

1、纯 css 瀑布流：（ multi-columns 方法 ）

首先最早尝试使用纯 CSS 方法解决瀑布流布局的是 CSS3 的 Multi-columns。

其最早只是用来用来实现文本多列排列（类似报纸杂志样的文本排列）。但对于前端同学来说，他们都是非常具有创意和创新的，有人尝试通过 Multi-columns 相关的属性 column-count、column-gap 配合 break-inside 来实现瀑布流布局。

/* 这里是第一次接触到 column-columns 这个属性，这是一个可以设置将div元素中的文本分成几列 */
/* 默认值是：auto */
column-count: 3;
-moz-column-count: 3; /* Firefox */
-webkit-column-count: 3; /* Safari and Chrome */
 
/* 注意：IE9及更早 IE 版本浏览器不支持 column-count 属性 */
/* 这里还会用到另一个属性 column-gap，用来调整边距，实现瀑布流布局 */
.demo-1 {
  -moz-column-count: 3; /* Firefox */
  -webkit-column-count: 3; /* Safari 和 Chrome */
  column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  width: 80%;
  margin: 0 auto;
}
.item {
  padding: 2em;
  margin-bottom: 2em;
  -webkit-column-break-inside: avoid;
  break-inside: avoid; /*防止断点*/
  background: #ccc;
  text-align: center;
}

column-count 和 column-gap，前者用来设置列数，后者设置列间距。

上面控制了列与列之间的效果，但这并不是最关键之处。当初纯 CSS 实现瀑布流布局中最关键的是堆栈之间的间距，而并非列与列之间的控制（说句实话，列与列之间的控制 float 之类的就能很好的实现）。找到实现痛楚，那就好办了。或许你会问有什么 CSS 方法可以解决这个。在 CSS 中有一个 break-inside 属性，这个属性也是实现瀑布流布局最关键的属性。

其中 break-inside:avoid 为了控制文本块分解成单独的列，以免项目列表的内容跨列，破坏整体的布局。当然为了布局具有响应式效果，可以借助媒体查询属性，在不同的条件下使用 column-count 设置不同的列。