瀑布流布局前言瀑布流布局，作为一种独特的网页设计，以流畅的而自然的展现形式，引领着全新的视觉体验。瀑布流布局的美妙之处

前言

瀑布流布局，作为一种独特的网页设计，以流畅的而自然的展现形式，引领着全新的视觉体验。瀑布流布局的美妙之处，在于它能够根据不同屏幕尺寸和内容大小自动调整，从而在保持视觉平衡的同时，提供更好的响应式体验。

实现效果

1.webp

2.webp

3.webp

4.webp

5.webp

6.webp

7.webp

8.webp

9.webp

10.webp

HTML

定义一个container容器，再定义20个box容器，再box容器内中再放box-img容器，在容器内存放img标签，该img标签用于存放图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            position: relative;
        }
        .box{
            float: left;
            padding: 5px;
        }
        .box-img{
            width: 150px;
            padding: 5px;
            border: 1px solid #4bc6b5;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/3.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/4.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/5.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/6.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/7.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/8.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/9.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/3.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/4.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/5.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/6.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/7.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/8.webp" alt="">
            </div>
        </div><div class="box">
            <div class="box-img">
                <img src="./img/9.webp" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/10.webp" alt="">
            </div>
        </div>

    </div>

    <script src="./index.js"></script>
</body>
</html>

JS

imgLocation('container', 'box');调用imgLocation函数，传入参数'container', 'box'，分别代表包含所有图片的容器的id和图片元素的类名。
定义一个函数imgLocation，用来获取页面中id为parent的元素，再调用getChildElement函数获取类名为content的子元素列表。
var imgWidth = ccontent[0].offsetWidth;用于获取第一个图片元素的宽度。
var num = Math.floor(document.documentElement.clientWidth / imgWidth);计算屏幕宽度可以容纳多少个图片。
var BoxHeightArr = [];创建一个空数组用来储存每列的高度。
再遍历所有的图片，对于前num个元素，直接记录其高度，之后的元素，找到当前所有列中的最小高度，将图片放置再该列下方，并且更新该列的高度。
使用var minHeight = Math.min.apply(null ,BoxHeightArr);找到当前所有列中的最小高度；使用var minIndex = BoxHeightArr.indexOf(minHeight);找到最小高度所在列的索引。设置图片的绝对定位。每次放置完一张图片之后需要更新对应的列高度。
定义一个函数getChildElement，从给定的父元素中获取所有具有特定类名的子元素。

//获取用户屏幕宽度，决定一行能放下几张图
//操作下一张图，放到上一行最矮的列下面

imgLocation('container', 'box');

function imgLocation(parent ,content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content); 
    //document.querySelectorAll('#container .box');
    //每一个box的宽度
    var imgWidth = ccontent[0].offsetWidth;
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);
    cparent.style.width = `${imgWidth * num}px`;

    //要操作的是哪一张，每一列的高度
    var 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;
        }
    }
};

function getChildElement(parent, child) {
    //获取parent中所有的child
    var childArr = [];
    var allChild = parent.getElementsByTagName('*');
    //挑出来所有的box
    for (var i = 0; i < allChild.length; i++) {
       if (allChild[i].className === child ) {
        childArr.push(allChild[i]);
       }
    }
    return childArr;
};