瀑布流布局

最新推荐文章于 2024-01-20 15:45:35 发布

罗罗诺亚D路飞

最新推荐文章于 2024-01-20 15:45:35 发布

阅读量33

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_72923430/article/details/134315646

版权

<!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>
        .box {
            width: 80%;
            margin: auto;
            position: relative;
        }
        img {
            width: 300px;
            height: auto;
            padding: 5px;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body onload="imageLoaded()">
    <div class="box">
        <img class="boximg" src="./img/1688097583302.png" alt="">
        <img class="boximg" src="./img/1688098212354.png" alt="">
        <img class="boximg" src="./img/liudehua.jpeg" alt="">
        <img class="boximg" src="./img/zhouxingchi.jpg" alt="">
        <img class="boximg" src="./img/微信图片_1.png" alt="">
        <img class="boximg" src="./img/微信图片_2.png" alt="">
        <img class="boximg" src="./img/联想截图_20230722112957.png" alt="">
        <img class="boximg" src="./img/联想截图_20230920104426.png" alt="">
        <img class="boximg" src="./img/1688097583302.png" alt="">
        <img class="boximg" src="./img/1688098212354.png" alt="">
        <img class="boximg" src="./img/liudehua.jpeg" alt="">
        <img class="boximg" src="./img/zhouxingchi.jpg" alt="">
        <img class="boximg" src="./img/微信图片_1.png" alt="">
        <img class="boximg" src="./img/微信图片_2.png" alt="">
        <img class="boximg" src="./img/联想截图_20230722112957.png" alt="">
        <img class="boximg" src="./img/联想截图_20230920104426.png" alt="">
    </div>
</body>
<script>
    function imageLoaded() {
        var box = document.querySelector(".box")
        var box_width = box.offsetWidth
        var boxlength = Math.floor(box_width / 300)
        var arr = []
        for (let i = 0; i < boxlength; i++) {
            arr[i] = 0
        }
        function findMinIndexes(arr) {
            let min = Math.min(...arr);
            let indexes = [];
            for (let i = 0; i < arr.length; i++) {
                if (arr[i] === min) {
                    indexes.push(i);
                }
            }
            return indexes;
        }
        var imgall = document.querySelectorAll(".boximg")
        imgall.forEach((v, i) => {
            let num = findMinIndexes(arr)
            console.log(num[0]);
            v.style.top = `${arr[num[0]]}px`
            v.style.left = `${num[0] * 300}px`
            arr[num[0]] += v.offsetHeight
            console.log(i, v.offsetHeight);
        })
    }
    window.addEventListener("resize", imageLoaded);
</script>

</html>

大体流程是等图片加载完毕，根据每个的高度去定位排序，监听窗口宽度去自适应