搞定阿里面试题:如何实现瀑布流布局

前言

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，同宽不等高，依次按照规则放入指定位置。

瀑布流的参差不齐的排列方式，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动，让我们看看瀑布流效果是怎么样的,多说无益，让我们直接看看瀑布流是什么样的：

理清思路

1、首先咱们需要准备vscode开发工具，再准备多一点图片以达到瀑布流效果（40张）。

2、编写代码，设置图片样式让图片在同一行同宽不等高显示。

3、获取第一行最多可放图片数量，第一行放不下的图的序号以及前一行高最小的图的序号，将放不下的图放到下一行，对应前一行高最小的图的同一列当中去。

代码实现

一、前端代码实现

1、首先定义一个container容器来装所有图片，在container容器中用box容器装box-img容器，再用box-img容器装入每张图片。

<div id="container">
    <div class="box">
        <div class="box-img">
            <img src="./1.webp" alt="">
        </div>
    </div>
    <div class="box">
        <div class="box-img">
            <img src="./1.webp" alt="">
        </div>
    </div>
    <!-- 以此类推，写满40个box容器 -->
</div>

2、为box容器添加float: left;属性，使图片按同一行排列。设置内边距是为了效果更加美观。

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

3、为box-img容器设置width:150px;属性 使图片宽一致，img设置width:100%;属性，继承父容器box-img高度的100% ，使图片达到同宽不等高的效果。同样加入内边距和边框使图片更美观。

.box-img{
            width: 150px;
            padding: 5px;
            border: 1px solid #aaa
        }
        img {
            width: 100%;
        }

二、js代码实现

理清思路

确定第一行能放n张图：1.获取屏幕宽度 2.获取图片的宽度 3.n = 屏幕宽度/图片宽度

摆放图片操作第 n+1 张图摆放在前一行高度最小的那一列1.获取每一列的高度2.更新这一列的高度

1、首先调用window.onload=function(){}这个函数完成接下来的执行任务，在这个函数中，我们调用imgLocation('container','box')函数，传入参数父容器'container' 以及用于装图片的子容器'box'。

window.onload = function() {
    imgLocation('container','box')
    //接2、函数imgLocation()的功能实现
}

2、函数imgLocation()的实现

确定第一行能放n张图：1.获取屏幕宽度 2.获取图片的宽度 3.n = 屏幕宽度/图片宽度

首先定义函数imgLocation(parent,child) {}，利用getElementById(parent)方法来获取父容器container，再利用getElementsByClassName(child)方法来获取装载图片的容器box并返回到一个数组当中去。

声明一个变量screenWidth，利用Window.innerWidth 返回以像素为单位的窗口的内部宽度。再利用cChild[0].offsetWidth获取图片的宽度，将两者相除向下取整得到一行最多可放几张图，为父容器container设置宽度，即为imgWidth*num，

function imgLocation(parent,child) {
        var cParent = document.getElementById(parent)
        var cChild = cParent.getElementsByClassName(child)
        var screenWidth = window.innerWidth
        var imgWidth = cChild[0].offsetWidth
        var num = Math.floor(screenWidth / imgWidth)  //放得下几张图片向下取整
        cParent.style.width = `${imgWidth*num}px`

        //摆放图片
        
    }

摆放图片 第 n+1 张图放在前一行高最小的那一列1.获取每一列的高度2.更新这一列的高度

首先定义一个空数组boxHeightArr用来存放列高，利用for循环来遍历存放box的数组，若摆放数小于num，则摆放在第一行，并利用boxHeightArr.push(cChild[i].offsetHeight)将高传入到数组中去，利用indexOf() 返回第一行行高最小的图片的数组下标，将第num+1张图摆放在第二行高最小图同一列。

对图片容器样式进行调整：设置为绝对定位 position：absolute; 设置top值为前一行高最矮的图片高度minHeight，设置left值为前一行高最小图片的left值。

最后，记得更新这一列的高度。

        //操作 n+1 张
        var boxHeightArr = []
        for (var i = 0; i < cChild.length; i++) {
            if (i < num) {  //第一行的n张图
                boxHeightArr.push(cChild[i].offsetHeight)
            }else {
                //找数组最小值
                var minHeight = Math.min(...boxHeightArr)
                var 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] = boxHeightArr[minIndex] + cChild[i].offsetHeight
            }
            
        }

js代码如下：

window.onload = function() {

    imgLocation('container','box')

    function imgLocation(parent,child) {
        var cParent = document.getElementById(parent)
        var cChild = cParent.getElementsByClassName(child)
        var screenWidth = window.innerWidth
        var imgWidth = cChild[0].offsetWidth
        var num = Math.floor(screenWidth / imgWidth)  //放得下几张图片向下取整
        cParent.style.width = `${imgWidth*num}px`

        //操作 n+1 张
        var boxHeightArr = []
        for (var i = 0; i < cChild.length; i++) {
            if (i < num) {  //第一行的n张图
                boxHeightArr.push(cChild[i].offsetHeight)
            }else {
                //找数组最小值
                var minHeight = Math.min(...boxHeightArr)
                var 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] = boxHeightArr[minIndex] + cChild[i].offsetHeight
            } 
        }
    }
}

以上就是实现过程啦，有错误的地方还请各位大佬指正，看完觉得对自己有帮助记得点个赞哦。