瀑布流

最新推荐文章于 2024-08-28 10:52:17 发布

不爽的麻雀

最新推荐文章于 2024-08-28 10:52:17 发布

阅读量83

点赞数

分类专栏：前端 js 手写

本文链接：https://blog.csdn.net/qq_41605091/article/details/111479688

版权

js 同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

手写

5 篇文章 0 订阅

订阅专栏

瀑布流

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            width: 100%;
            height: 100%;
        }
        .main{
            position: static;
            margin: 0;
            border: 0;
            padding: 0;
            background-color: antiquewhite;
            overflow: hidden;
        }
        .main div{
            width: 100px;
            padding: 10px;
            position: absolute;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box"><img style="width:100%;height: 200px"></div>
        <div class="box"><img style="width:100%;height: 151px"></div>
        <div class="box"><img style="width:100%;height: 256px"></div>
        <div class="box"><img style="width:100%;height: 331px"></div>
        <div class="box"><img style="width:100%;height: 222px"></div>
        <div class="box"><img style="width:100%;height: 444px"></div>
        <div class="box"><img style="width:100%;height: 111px"></div>
        <div class="box"><img style="width:100%;height: 531px"></div>
        <div class="box"><img style="width:100%;height: 661px"></div>
        <div class="box"><img style="width:100%;height: 145px"></div>
        <div class="box"><img style="width:100%;height: 103px"></div>
        <div class="box"><img style="width:100%;height: 133px"></div>
    </div>
</body>
<script>
	f();
    window.onresize = () => f()
    function f() {
        var box = document.getElementsByClassName("box"),
            boxWidth = box[0].offsetWidth,
            screenWidth = document.getElementsByClassName("main")[0].offsetWidth,
            cols = parseInt(screenWidth/boxWidth),
            heightArr = [];
        for(let i =0 ;i<box.length;i++){
            let boxHeight = box[i].offsetHeight,
            	left = 0,
            	top = 0;
            box[i].style.position = "absolute";
            if(i<cols){
                left = i * boxWidth;
                top = 0;
                heightArr[i] = boxHeight;
            }else{
                let num = parseInt(i%cols),
                	min = Math.min(...heightArr),
                	key = heightArr.indexOf(min);
            	left = key * boxWidth;
            	top = min;
                heightArr[key] += boxHeight;
            }
            box[i].style.left = left + "px";
            box[i].style.top = top + "px";
        }
    }
</script>
</html>