瀑布流布局：CSS3多列属性column实现

使用CSS3多列属性所踩得坑

1. 多列属性会将容器平分成对应设置列数
   如图：column-count: 2， 会将容器分成两列。需要注意：每列之间会有个默认间距，大概是16px，间隔如图红线所处的空白空间。这个空白空间即列之间间隔可以通过column-gap属性调整，若设为0，列之间也就没有间隔啦.
   
2. 列宽column-width属性不生效问题
   在实现瀑布流的父容器.waterfall（最下面附有代码图）中直接设置column-width:100px;（设置列宽）属性未生效，每列的内容都会撑满列宽（因为用的是块元素），如下图效果：
   
   当我将父容器设为：display: inline-block;时，column-width:100px;才生效，为什么会这样就不得而知啦(可能是父容器是块元素，通过width更改，而设置列宽会影响父容器宽度，因为多列是对父容器平分多列，而行内块恰好能根据内容自适应宽)，查看官方属性文档也没有说明会出现这种情况。也可以单独给每列的内容项设置宽度。使用display: inline-block;还有一个好处就是，父容器宽度会自适应，这样两列的元素就不会看着相隔太远，不会像图1那种效果。
   
3. break-inside属性的使用解决内容截断跨列显示问题
   可能你以为会使用column-count,column-width,column-gap这三个属性就能达到自己想要的瀑布流布局，一切就万事大吉啦。然而事实不是这样，如果填充瀑布流布局容器的每一项内容的高度不是相同的，都会出现这种某一项在一列底部空间不足以显示被截断一部分显示在另一列的顶部。如下图：
   造成这种问题的原因是：column多列属性规定的每列高度都是相同的，所以空间不足就会被截断。毕竟column只是将一个容器分成多列显示，都是同一个容器，肯定要保证高度相同。
   
   为了解决这个问题，查阅网上资料，很多人说将父容器添加height:100%;overflow:auto;这两个属性就能解决这个问题，但亲测无效。
   于是试了下下面这种方法(推荐，父容器只需要根据填充内容自适应高度即可)：**将每个项添加 break-inside: avoid;**属性可以完美解决这个问题。