阿里面试官：怎么实现瀑布流？我：简历还我！

小陈要努力呦

已于 2024-06-30 15:44:49 修改

阅读量837

点赞数 26

分类专栏： JavaScript 文章标签： javascript

于 2024-06-11 23:12:22 首次发布

本文链接：https://blog.csdn.net/weixin_56440777/article/details/139610943

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前言

阿里面试官：怎么实现瀑布流？

我：简历还我！！等我学会了再来！

瀑布流布局它是一种很有想法的布局，能够不断勾引用户的心，增加用户的浏览兴趣。

下面我们将深入探究实现瀑布流的核心原理与关键技术，一步步拆解其实现过程，从基本概念到具体代码实现，带领大家一同揭开瀑布流背后的神秘面纱。

实现

什么是瀑布流布局？

瀑布流布局将页面内容按照一定规则排列成多列,并根据内容高度的差异,形成层层下降的瀑布状效果。这种布局方式不仅美观大方,而且能够有效利用有限的屏幕空间,为用户呈现更多的内容。

效果展示

通过边框可以看到图片的排布如瀑布状，错落有致，效果很完美

代码分析

html

html页面的布局是非常简单的就是盒子里放图片，重点在js部分

<div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.webp" alt="转存失败，建议直接上传图片文件">
            </div>
        </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>

<div id="container">: 这是整个瀑布流布局的容器,所有的图片都会放在这个容器内。
<div class="box">: 这个是每个图片的容器。我们将每个图片放在一个 box 类的 div 中。
<div class="box-img">: 这是图片的容器。我们将图片放在这个 box-img 类的 div 中。
<img src="./img/1.webp" alt="">: 这就是实际的图片元素。src 属性指向图片的路径,alt 属性是图片的替代文本。

css

CSS 规则为我们的瀑布流布局打好基础。但是,我们还需要使用 JavaScript 来动态计算和调整每个图片容器的位置,才能真正达到瀑布流效果。这部分我们将在下一步中介绍。

* {
            margin: 0;
            padding: 0;
        }

        #container {
            position: relative;

        }

        .box {
            float: left;
            padding: 5px;
        }

        .box-img {
            width: 150px;
            padding: 5px;
            border: 3px solid #fb0000;
        }

        img {
            width: 100%;
        }

* { margin: 0; padding: 0; }: 这是一个通用的样式规则,用于去除元素的默认内外边距,使整个布局更加紧凑。
#container { position: relative; }: 将容器设置为相对定位,这样可以为后续的定位操作提供参考。
.box { float: left; padding: 5px; }: 将每个图片容器设置为左浮动,并添加一些内边距,使图片之间有一定的间隔。
.box-img { width: 150px; padding: 5px; border: 3px solid #fb0000; }: 设置每个图片容器的宽度为 150px,添加内边距和红色边框,使图片有一定的视觉效果。
img { width: 100%; }: 将图片的宽度设置为容器的 100%,使图片完全填充容器。

js（重点）

重点部分终于来咯！！！认真听讲咯！！！

核心思想：先排好第一行，然后哪里最矮放哪里，不断往复，最后就能形成我们要的瀑布流布局了。

首先确认好要放几张图片，这一步是为了确认第二行开始是从哪张图片开始。
通过var ccontent = document.querySelectorAll('.box');拿到父容器container，然后拿到图片盒子var ccontent = document.querySelectorAll('#container .box');拿到他的宽度var imgWidth = ccontent[0].offsetWidth;计算能放几个var num = Math.floor(document.documentElement.clientWidth / imgWidth);这里是需要向下取整的
接下来就是将之后的图片放到他们自己的位置了
- 首先记录好每一列的图片高度
  
  用一个数组记录每一列的高度var BoxHeightArr = [];通过在循环中将高度插入到数组if (i < num) { // 第一行每一列的高度 BoxHeightArr[i] = ccontent[i].offsetHeight; }
- 在上一步我们已经确认好了第一行之后的是从哪个开始了
- 现在只需要确认好最矮的图片位置，然后将它放到最矮图片下面，再跟新该列的高度即可，反复将所有的图片加入到页面即可，以下详解

             // 需要操作的部分,下一行了
             // 获取最小的高度
            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] += ccontent[i].offsetHeight;

以下为详细js代码

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

function imgLocation(parent, content) {
    var cparent = document.getElementById(parent);

    // 有多少张图片
     var ccontent = document.querySelectorAll('#container .box');

    // 获取每一个box的宽度
    var imgWidth = ccontent[0].offsetWidth;

    // 屏幕一行能放下几个图片  5.6 取整放5张
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);

    //设置container的宽度
    cparent.style.width = `%{imgWidth *num}px`;

    // 要操作的是哪一张？num+1，取到每一列的高度
    var BoxHeightArr = [];
    for (let 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] += ccontent[i].offsetHeight;

            console.log(minIndex);
        }
    }

    // console.log(BoxHeightArr);

}

imgLocation('container', 'box');

总结

本文深入探究实现瀑布流的核心原理与关键技术，一步步拆解其实现过程，从基本概念到具体代码实现，带领大家一同揭开瀑布流背后的神秘面纱。无论你是初涉前端开发的新手，还是经验丰富的技术专家，都能从本文中获得对瀑布流更深刻的理解和启发。

完整代码

html + css

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            position: relative;

        }

        .box {
            float: left;
            padding: 5px;
        }

        .box-img {
            width: 150px;
            padding: 5px;
            border: 3px solid #fb0000;
        }

        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>
    <script src="index.js"></script>
</body>

</html>

js

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

function imgLocation(parent, content) {
    var cparent = document.getElementById(parent);

    // 有多少张图片
     var ccontent = document.querySelectorAll('#container .box');
    // console.log(ccontent.length);

    // 获取每一个box的宽度
    var imgWidth = ccontent[0].offsetWidth;

    // 屏幕一行能放下几个图片  5.6 取整放5张
    var num = Math.floor(document.documentElement.clientWidth / imgWidth);

    //设置container的宽度
    cparent.style.width = `%{imgWidth *num}px`;

    // 要操作的是哪一张？num+1，取到每一列的高度
    var BoxHeightArr = [];
    for (let 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] += ccontent[i].offsetHeight;

            console.log(minIndex);
        }
    }

    // console.log(BoxHeightArr);

}

imgLocation('container', 'box');