原生CSS瀑布流写法:flex,position,column-count,效果图及缺点

原生CSS瀑布流写法

1. 设置column-count：

原理： 将子元素分两列展示，从而实现简单的瀑布流布局
效果：

缺点：

1. 纵向布局，和现在市面以及用户的使用习惯不符
2. 需要一次性拿到所有数据（与瀑布流的数据处理方式不符）

---

2. 使用flex布局

code：

display:flex;
flex-wrap:wrap

原理： 超出一行的向下横向布局
效果：