♐瀑布流布局简介
瀑布流，又称瀑布流式布局，是一种备受欢迎的网站页面布局方式。其视觉效果呈现为多栏布局，栏目高度参差不齐，在用户滚动页面时，持续加载数据块并追加到当前内容尾部。Pinterest是最早采用这种布局的网站之一，逐渐在国内流行起来，成为国内许多清新网站的主流风格。
🔄瀑布流的特点
引人入胜的吸引力： 瀑布流对用户具有强烈的吸引力，通过在页面底部不断加载新的信息块，以视觉上不完整的图片吸引用户好奇心，促使用户不断向下滚动，探索更多内容。
信息集中，成本最小化： 瀑布流的信息呈现相对集中，用户在最小的操作成本下能够获得最丰富的内容体验。这使得瀑布流布局更适应移动端，因为在移动设备上，屏幕较小，一个屏幕显示的内容较少，用户只需滚动即可不断浏览更多内容。
定宽不定高的视觉设计： 瀑布流的主要特点是其元素有着定宽但不定高的特质。这种设计与传统的矩阵式图片布局模式不同，通过灵活运用视觉层级，以及视线的自由流动，巧妙地缓解了视觉疲劳，为用户提供更为舒适的浏览体验。
🍉JS实现部分（简化代码）：
🚀实现原理解析
🥂瀑布流的形成基于两个主要特征：
固定宽度，不固定高度的内容框： 每个元素的宽度是固定的，而高度是不确定的。
从左到右的排列方式： 元素按照从左到右的顺序排列，当一行元素排满后，剩余的元素会按序排在当前高度最短的那一列后面。
（可以通过最小二叉树的概念类比瀑布流的形成算法）
首先，我们需要计算每行可以容纳的元素列数，以适应不同设备的屏幕宽度。
然后，通过比较计算，找出当前每列元素高度之和最小的那一列。
（假设这一列是我们所谓的“框起来的列”）
接下来，将下一行的第一个元素添加到当前高度之和最小的那一列的下方。
继续计算所有列中高度之和最小的那一列，并将新元素添加到这一列的后面，直至所有元素都被添加完毕。
这个过程保证了元素的动态排列，以适应不同尺寸的屏幕，并确保整体布局呈现出瀑布流的视觉效果。
📝实现步骤及算法
👉1. 导入图片并定位：
将所需图片导入页面，并通过CSS将它们统一定位为position: relative，使它们处于相对定位的状态。
👉2. 建立JS文件并引入：
在项目中建立一个JavaScript文件（例如index.js），并在HTML文件中引入该文件。
👉3. 全局监听图片加载：
使用window.onload全局监听页面上所有图片的加载情况，以便后续安排图片的位置。
👉4. 获取要摆放的图片数量：
编写函数获取要摆放图片的容器和图片元素，并返回图片元素的数组。
（也可以使用querySelectorAll()方法）
👉5. 确定图片宽度和每行放置数量：
获取第一张图片的宽度，并计算每行可容纳的图片数量。
👉6. 循环放置图片：
创建一个数组BoxHeightArr用于存储每列的高度。通过循环遍历所有图片，将它们按瀑布流的方式放置在页面上。
这一算法保证了图片的动态排列，以适应不同尺寸的屏幕，并展现出瀑布流的视觉效果。
🐠代码分享
HTML：
JavaScript：
在这里，我稍微改变了注释和函数名，使其更加清晰和易读。
