# 实现瀑布流布局
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。
## 实例
主体思路是记录每一列的高度，父容器相对定位，成员绝对定位，利用`top`与`left`属性控制位置，每次新增加成员时找到高度最低的那个将成员置于其下方，即可实现瀑布流布局。如果不需要动态加入成员，而只是一次性加载供展示用，那么可以考虑使用`flex`布局将容器设置为`flex-direction: column;`以及`flex-wrap: wrap;`并给予容器一个合适的高度来实现，还可以使用`CSS3`新增的`column-*`多列布局来实现，这两种也就是纯`CSS`实现的瀑布流布局的方式，但是由于这两种方式都是将成员纵向排列，并不适合需要动态插入成员的布局，当需要动态插入成员时还是需要使用`Js`来实现。
```html
Js瀑布流布局
```
## 每日一题
```
https://github.com/WindrunnerMax/EveryDay
```
## 参考
```
https://www.cnblogs.com/imgss/p/11072266.html
https://blog.csdn.net/weixin_44135121/article/details/98629830
```