1-何为瀑布流？

首先我们要知道什么叫瀑布流。瀑布流，又称瀑布流式布局，是信息流网格布局的一种视觉形式。顾名思义，这种布局形式既像瀑布一样无限向下倾泻，内容又如水一样没有固定样式。比如你在你的手机里逛淘宝，首页推荐的物品所在的容器虽然宽度相同，但是高度不同，导致从上往下排列就会参差不齐，这就叫瀑布流。

2-为什么要去弄瀑布流，它有什么作用？

瀑布流布局在网页设计中主要用于展示图片和内容，其核心作用包括：

提升浏览体验：无限滚动自动加载内容，使浏览更连贯。
视觉吸引：错落布局增添视觉趣味，适合视觉导向内容。
移动优化：适应移动端操作，上下滑动即可浏览，提高便捷性。
增强参与度：鼓励用户探索，延长页面停留时间，促进互动。
个性化展示：可根据用户偏好调整内容，实现个性化体验。

这种布局虽有优势，也应注意避免滚动过长导致的定位困难和视觉疲劳。

3-如何去实现呢？

我们先规划步骤：

第一步：我们先创建一个大容器container，去存放我们的瀑布流。
第二步：创建n个小盒子box，在box中设置一个box-img容器去存放我们的图片。
第三步：再让小盒子实现瀑布流排列。

第一步和第二步代码如下：

    <div id="container">
    <div class="box">
        <div class="box-img">
            <img src="./img/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/3.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/4.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/8.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/3.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/4.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/8.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/3.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/4.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/5.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/6.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/7.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./img/8.jpg" alt="">
        </div>
    </div>
</div>

因为div他是块级元素，所以我们的小盒子它是不能在一行的，因此我们还需要加一点css。

因为所有容器自带内外边距，我们不想要这个边距，我们就把它消掉。
给contianer容器设置相对定位，让他的子容器以对做榜样相对它去定位。
我们把box容器设置一个浮动，让他们脱离文档流，可以在一行排列
给box-img设置高度和外边距，并给他弄一个边框，不设置高度是因为每个图片比例不一样，不设置可以让图片不变形。
让图片的宽度充满容器。

css代码如下：

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

我们要实现瀑布流排列如果纯用css非常麻烦，所以我们需要使用到js去实现瀑布流排列。先分析步骤：

第一步：确定第一行能放几张图，假设可以放n+1张图。

获取用户屏幕宽度。
获取图片宽度。第二步：操作第n+1张图摆放到高度最小的那一列。
获取每一列的高度。
更改图片之后我们要更新这一列的高度。

js代码如下：

imgLocation('container','box');
function imgLocation(parent,child) {
    // 获取父容器
    let cParent =document.getElementById(parent);   
    // 获取所有子容器
    let cChild =cParent.getElementsByClassName(child); 
    // 获取屏幕宽度
    let screenWidth =window.innerWidth;
    // 获取图片宽度
    let imgWidth =cChild[0].offsetWidth;
    // 确定第一行可以放几张图
    let num =Math.floor(screenWidth/imgWidth);
    // 操作第n+1 张 摆放位置
    // 存每一列的高度
    var boxHeightArr =[];
    for(let i=0;i<cChild.length;i++){
        if(i<num){
            boxHeightArr.push(cChild[i].offsetHeight);
        }else {
            // 找数组的最小值 就相当于找到最短的那一列
            let minHeight =Math.min(...boxHeightArr);
            let minIndex =boxHeightArr.indexOf(minHeight);
            // 摆放图片
            cChild[i].style.position ='absolute';
            cChild[i].style.top =`${minHeight}px`;
            cChild[i].style.left =`${cChild[minIndex].offsetLeft}px`;
            // 更新数组
            boxHeightArr[minIndex]+=cChild[i].offsetHeight;
        }
    }
}

效果如下：

当你面试的时候面试官问你如何实现瀑布流，你应该能轻松应对了，祝各位都能找到好工作。

阿里面试题：如何实现瀑布流？

1-何为瀑布流？

2-为什么要去弄瀑布流，它有什么作用？

3-如何去实现呢？