html+js实现瀑布流玩法

前言

瀑布流结构是一种常见的网页布局方式，也被称为瀑布流布局或瀑布流式布局。它以瀑布般自上而下、一列接一列的方式展示内容，每一列的宽度相等，但每个元素的高度可以不同，使得页面呈现出错落有致的效果。

解析步骤

确定第一行能放几张图

1.获取屏幕的宽度

2.获取图片的宽度

操作第n+1张图，摆放它的位置放在高度最小的一列

1.获取每一列高度并把第n+1张图放在它下面

2.更新这一列的高度

话不多少上效果图

为了简洁，我就留了两张图放在html代码里

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container {
            position: relative;
        }
        .box {
            float: left;
            padding: 5px;

        }
        .box-img {
            width: 150px;
            padding: 5px;
        }
        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>
    <script src="./index.js">

    </script>
</body>

</html>

js代码，并对每一行都做了解释

imgLoaded('container', 'box')

function imgLoaded(parent, child) {
    //获取id为parent的对象
    var cParent = document.getElementById(parent)
    //获取class为child的对象
    var cChild = document.getElementsByClassName(child)
    //获取屏幕的宽度
    var screenWidth = window.innerWidth
    //获取图片的宽度
    var imgWidth = cChild[0].offsetWidth
    //屏幕的宽度/一张图片的宽度并向下取整
    var num = Math.floor(screenWidth / imgWidth)
    //设置parent的宽度为一张图片的宽度*第一行能放的图片数量
    cParent.style.width = `${imgWidth * num}px`

    //操作第n+1张
    var boxHeightArr = []
    for (var i = 0; i < cChild.length; i++) {
        if (i < num) {
            //将第一行放满
            boxHeightArr.push(cChild[i].offsetHeight)
        } else {//处理n+1及后面的图片
            //获取已经排列的图片高度最低的以列
            var minHeight = Math.min(...boxHeightArr)
            //查找最小高度minHeight在boxHeightArr数组中的索引，并将这个索引值保存在变量minIndex中。
            var minIndex = boxHeightArr.indexOf(minHeight)
            //设置n+1张图的定位
            cChild[i].style.position = 'absolute'
            //设置n+1张图的距离顶部的距离
            cChild[i].style.top = `${minHeight}px`
            //设置n+1张图的距离左侧的距离
            cChild[i].style.left = cChild[minIndex].offsetLeft + `px`

            //更新这一列高度
            //更新n+1张图所在的高度
            boxHeightArr[minIndex] += cChild[i].offsetHeight
            //打印结果
            console.log(minIndex)
        }
    }
    console.log(screenWidth)
}

主打的还是一种思维，先去想一个大步该怎么走，然后把大步分解成小步就行。

1、第一行能放几张图，2、操作第n+1张图，摆放它的位置放在高度最小的一列

想要知道第一行能放几张图，就得知道屏幕的宽度和图片的宽度

操作第n+1张图，就是找到第一行高度最低的一列，然后放在他下面，该怎么放置呢？可以设置图片的左侧和顶部的距离，这个都可轻易获得，最后更新这一列的高度

总结

代码思维就是一种拆分思维，把大件一件件剖析成小件然后。