h5和小程序实现瀑布流布局的最佳实践，只需css就可实现，绝对好用！
前言：pc端的瀑布流为了兼容，我们需要用js写，如果在移动端，只需用css即可实现，
主要使用到的 css:
column-count -- 列的数量，
column-width --列的宽度,
colum-gap -- 列与列之间的距离
先看效果：
实现步骤：
1.上图我只要两列瀑布流,为了我们能更好的设置瀑布流距离左右两侧的距离相等，我们只使用 column-count 和 column-gap,，设置column-count:2, column-gap:0，
2.设置列宽item,上图中我设置item的宽为330rpx
3.设置了item宽度后，怎么才能使得瀑布流中间，以及距离左右两侧的边距相等呢；我们这里只有两列，也就是只有左，中，右三个间隙，所以用总长减去两个列宽再除以3就得到了每个间隙的距离，上图使用的是小程序，所以间隙的宽度大概为（750 - 330*2）/ 3 = 30rpx; 所以我设置了item的margin-right:30rpx;同时设置父元素.wrap的padding-left:29rpx（留一像素，哈哈）,这样就能实现间隙相等了.
4.遇到的问题：会遇到列的顶部不对齐，还有内容出现折断，上一个item的底部出现在下一个item的顶部现象，如下图
解决 折断：
（1）item添加样式 -- overflow: auto; height: 100%; （不推荐）
(2) item添加样式 -- display: inline-block; (推荐)
解决 顶部不对齐：
将margin-bottom改成margin-top即可
5.细节的处理：
图片高度自适应，设置图片的样式为width:100%,height:auto,如果是在小程序，这样不起作用，还需要设置image 的mode属性为 widthFix才行。