• 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）(2)

56 </script>

最终效果图：

总结瀑布流布局原理

• 设置图片宽度一致
• 根据浏览器宽度以及每列宽度计算出列表个数，列表默认0
• 当图片加载完成，所有图片依次放置在最小的列数下面
• 父容器高度取列表数组的最大值

引申知识点

• let，const以及var三者的区别
• 滚动加载图片（懒加载原理）
• 反撇号（`）基础知识
• style和style.cssTest 的区别