前言

瀑布流布局模式是一种常见的网页布局方式，常用于展示图片或内容，让页面看起来更具有吸引力和动感。它的特点是将内容按照一定规则排列，使得每个内容块的高度可以不同，但整体布局呈现出类似瀑布般的效果。那么今天就让我们一起来实现瀑布流布局吧！

效果展示：

准备工作

• 首先我们准备好自己喜欢的二十张左右的图片

HTML

<div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="">
            </div>
        </div>
</div>

这是一个基础的HTML结构，container容器内包含box，用来包裹图片。二十张图片便有20个box。如果你想要将这些盒子以瀑布流布局的方式展示出来，就需要使用CSS和JavaScript来实现。你需要确定每个盒子的宽度，然后动态地将它们放置在页面上，使得它们形成类似瀑布流的效果，同时保持布局的平衡和美观性。

CSS

<style>
        * {
            margin: 0;
            padding: 0;
        }
        #container {
            position: relative;
        }
        .box {
            float: left;
            padding: 3px;
        }
        .box-img {
            width: 150px;
            padding: 5px;
            border-bottom: 1px solid green;
        }
        img {
            width: 100%;
        }
    </style>

• 通用样式 margin 和 padding，将所有元素默认外边距和内边距都设置为 0，这样可以保证页面的布局更加一致。

• 给容器元素 container 设置了相对定位，这是为了在后续的布局中作为参考点或者容器。

• 给盒子 box 设置了左浮动，并且设置了一定的内边距。左浮动可以使盒子水平排列，而内边距可以为盒子之间增加间距。

JS

function imgLocation(parent, content) {
    // 有多少张图
    var cparent = document.getElementById(parent)
    var ccontent = getChildElement(cparent, content)   // document.querySelectorAll('#container .box')
    // 每一个box的宽度
    var imgWidth = ccontent[0].offsetWidth
    //获取整个文档宽度÷imgWidth
    var num = Math.floor(document.documentElement.clientWidth / imgWidth)
    cparent.style.width = `${imgWidth * num}px`
  
    // 要操作的是哪一张，每一列的高度
    var BoxHeightArr = []
}

• imgLocation() 函数接受两个参数，分别是父元素的id和子元素的类名。这个函数接下来的作用是根据屏幕宽度和图片宽度来决定一行可以放下多少张图片，然后根据每一列的高度动态排列图片，实现瀑布流布局。

• getElementById(parent) 获取了父元素，getChildElement(cparent, content) 获取了所有的子元素，这个函数我们后面会手动定义。

• .offsetWidth 用于获取元素在页面中的整体宽度，包括元素的宽度、内边距(padding)和边框(border)的宽度，但不包括外边距(margin)。用来获取每个盒子的宽度，以便进行布局计算。

• document.documentElement.clientWidth 表示当前文档的可视区域宽度，即浏览器窗口的宽度imgWidth 是每个盒子的宽度，通过之前获取的第一个盒子的宽度来确定。通过将可视区域的宽度除以每个盒子的宽度，得到的结果可能是一个小数，但我们希望得到一个整数，因为我们不能显示部分盒子。因此使用 Math.floor() 函数来取整，确保得到的是一个整数。num 的值即为每一行可以容纳的盒子数量，这个值将用于后续的布局计算。

• 初始化了一个数组 BoxHeightArr，用于存储每一列的高度。

for (var i = 0; i < ccontent.length; i++) {
      if (i < num) { // 第一行
        BoxHeightArr[i] = ccontent[i].offsetHeight
      } else { // 要操作的
        var minHeight = Math.min.apply(null, BoxHeightArr)
        var minIndex = BoxHeightArr.indexOf(minHeight)
  
        // 摆放图片的位置
        ccontent[i].style.position = "absolute"
        ccontent[i].style.top = minHeight + "px"
        ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px"
  
        // 更新这一列的高度
        BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight
      }
    }

• 这个for循环遍历所有盒子。如果当前盒子是第一行的盒子，就将它的高度记录在 BoxHeightArr 数组中，用于后续计算；如果当前盒子不是第一行的盒子，就找到 BoxHeightArr 数组中高度最小的那一列，并记录其索引。然后，将当前盒子的位置设置为该列的底部，及高度最小的列的高度，并根据该列的左边位置设置当前盒子的左侧位置。最后，更新该列的高度，加上当前盒子的高度，以便下一次盒子摆放的位置计算，直至循环结束。这样就完成了除第一行之外的盒子的定位，实现了瀑布流的效果。

function getChildElement(parent, child) {
    //获取parent中所有的child
    var childArr = [];
    var allChild = parent.getElementsByTagName('*');  // 获取父元素下所有的子元素
    //挑出所有的box
    for (let i = 0; i< allChild.length; i++) {
        if (allChild[i].className == child) {   //判断子元素的类名是否与传入的类名相符
            childArr.push(allChild[i]);         // 如果相符，则将子元素添加到数组中
        }
    }
    return childArr;  // 返回匹配的子元素数组
}

• getChildElement(cparent, content) 获取了所有的子元素。这里获取子元素的方法还可以通过：document.querySelectorAll('#container .box') 这条语句来实现，但考虑到未来代码修改或优化时，可能会出现 box 名重复或被修改的情况，所以我们自己手动封装一下，会更加方便和安全。

imgLocation('container', 'box');

• 最后调用函数，实现瀑布式布局。

结尾

今天学习了瀑布流布局模式的实现原理和代码，通过分析代码逻辑和功能，我深入了解了如何使用JavaScript和CSS来创建动态的网页布局。在学习过程中，我了解到了瀑布流布局的核心思想是按照一定规则排列内容，使得页面呈现出动感和吸引力。通过这种布局方式，可以有效地展示图片或其他内容，提升用户体验和页面美观度。

总的来说，今天的学习让我收获颇丰，不仅学到了新的布局技术，也提升了编程能力和解决问题的能力。我会继续保持学习的热情，不断探索和提升自己在前端开发领域的技能水平。希望大家也能共同进步！