likes
comments
collection
share

阿里面试题：js实现瀑布流布局

作者站长头像
站长
· 阅读数 26

何为瀑布流布局

瀑布流布局是一种常见的网页布局方式，尤其适用于展示图片、商品列表或是信息卡片等多样化的网格内容。这种布局方式的灵感来源于自然界中的瀑布，特点是各个区块按照一定的列布局排列，每个区块的高度不固定，当一个列的高度达到一定程度时，接下来的内容会自动换到下一列开始排列，从而形成一种错落有致的视觉效果。

阿里面试题：js实现瀑布流布局

如何实现瀑布流算法

接下来，分享一下我对这道题的解题思路

1、首先我考虑到的是一行可以放下几张（n）图片

解决这个问题我们需要用到两个数据：屏幕宽度、图片宽度

代码实现

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)

2、再考虑第n+1张图片的位置

根据瀑布流布局的特点，第n+1张图片应放在高度最小的图片列下，那么我想到的是将所有列高度保存至数组中，使用Math.min（）得到最小高度列，再使用绝对定位将其放入，最后更新当前列的高度

代码实现

var boxHeightArr=[]
        for(var i=0;i<cChild.length;i++){
           if(i<num){
            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]+=cChild[i].offsetHeight

           }

完整代码

JS部分

window.onload=function(){
    //确定第一行能放n张图
    //1.获取屏幕宽度
    //2.获取图片宽度
    //操作第n+1张 摆放他的位置 放在高度最小的那一列
    //1.获取所有列的高度
    //2.更新这一列的高度

    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=`${num*imgWidth}px`

        //操作第num+1张图
        var boxHeightArr=[]
        for(var i=0;i<cChild.length;i++){
           if(i<num){
            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]+=cChild[i].offsetHeight

           }
        }
        
    }
}

HTML部分

<!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: 1px solid #aaa;
        }
        img{
            width: 100%;
        }
    </style>
    <script src="./index.js"></script>
</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>
    
</body>
</html>
转载自:https://juejin.cn/post/7369238146733899785
评论
请登录