如何用JavaScript实现瀑布流布局的详细步骤和原理？

本文共计1301个文字，预计阅读时间需要6分钟。

目录 + 需求 + 思路 + 代码实现 + 实现效果 + 问题与修正 + 修正后效果 + 总结 + 需求 + 所述瀑布流布局，即包含若干等宽列的布局，每列分别放置图片、视频等元素，所有元素宽度相同，因此可能形成瀑布流效果。

目录

• 需求
• 思路
• 代码实现
• 实现效果
• 问题和修正
• 修正后效果
• 总结

需求

所谓瀑布流布局，就是含有若干个等宽的列，每一列分别放置图片、视频等，放置的元素都是等宽的，因此可能是不等高的。新的元素到来时，会插入高度较低的那一列，这样形成参差的、视觉上像瀑布一样的布局。

这里简化一下，只要两列等宽布局展示图片即可。

思路

两列布局，直接使用flex布局实现即可。不过，这里不能设置align-items为center，如果设置了将会使图片列居中显示，不符合瀑布流的视觉效果。我设置left和right两列，两列的宽度相等，结构和样式基本就写完了。

然后写JavaScript。其逻辑是，判断当前left和right的高度（我使用clientHeight），如果左边<=右边，则放入左边，否则放入右边。遍历所有的图片，按照这个逻辑放入即可。