瀑布流的实现

纯css实现

使用 CSS3 中的多列布局

.parent {
 column-count: 4; /* 设置列数 */
 column-gap: 10px; /* 设置列之间的间隔 */
}

这样实现瀑布流的好处是能最简单，最快速的实现一个瀑布流布局，但是缺点是只能是静态的，如果需要分页，动态去渲染瀑布流的话，每次都会把原有的布局重新打乱

Js方式实现

1. 确定列数，例如3列（list1, list2, list3）
2. 每次都去循环，通过 new Image(), 在图片加载完成，onload 中去拿到图片的高度，判断三列哪个高度最小，list1.offssetHeight, 将新元素添加到高度最低的list上