瀑布流布局
如今，瀑布流布局已经在很多网站中得到应用，比如小红书、京东等平台我们都能找到瀑布流的身影，如图：
小红书
京东
瀑布流这种错落有致的布局方式给用户一种视差感，它打破了常规网页排版，清新脱俗而又不拘一格，让人眼前一亮。主要特点是，多行等宽元素排列，等宽不等高，就像俄罗斯方块一样，每个元素很自然的契合在一起。
实现方式
小红书和京东的瀑布流实现方式是有多少列就写多少个 div，然后再将每个元素放在每列中依次往下排列，如图所示：
但是我们这一小节的瀑布流方案与小红书不一样，使用 css3 的 column 属性来布局，这种方式更简洁易用，并且减少 DOM 嵌套，如图所示，最外层只需要一个 div 就可以实现瀑布流：
具体代码片段如图如下，老师将最重要的是三个样式属性标红圈起来了，它们是实现瀑布流的关键样式：
- colums-count 用来设置瀑布流的列数
- .item 设为
display: inline-block是为了不让每一项在换列的时候跨列溢出 - img 的高度设置为 auto，是为了突出瀑布流的参差感
总结
最终我们实现的瀑布流布局是一个 S 形的蛇形走位，它的 DOM 结构更佳简洁，姿势更优雅，如图所示：
