瀑布流布局 

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        width: 100px;
        height: 200px;
        background-color: rgb(122, 169, 209);
        float: left;
        margin-right: 10px;
        transition: all 0.3s;
    }

    #app {
        position: relative;
        width: 400px;
        margin: 100px auto;
        min-height: 100vh;
    }
    @media screen and (min-width:1680px){
        #app{
            width: 1600px;
        }
    }
    @media screen and (min-width:1200px) and (max-width:1680px){
        #app{
            width: 1200px;
        }
    }
    @media screen and (max-width:1200px){
        #app{
            width: 800px;
        }
    }
</style>

<body>
    <div id="app">
        <div class="box"></div>
        <div class="box" style="height:150px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 130px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 90px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 250px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 90px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 250px;"></div>
        <div class="box"></div>
        <div class="box" style="height:150px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 130px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 90px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 250px;"></div>
        <div class="box"></div>
        <div class="box" style="height:150px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 130px;"></div>
        <div class="box"></div>
        <div class="box" style="height:150px;"></div>
        <div class="box"></div>
        <div class="box" style="height: 130px;"></div>
        <div class="box"></div>
    </div>
</body>
<script>

 
    window.onresize = function () {
        setSort()
    }
    window.onload = function (){
        setSort()
    }
    function setSort() {
　　　　　// 获取所有盒子
        let boxs = document.querySelectorAll('.box');
　　　　　
        let app = document.querySelector('#app')
        let len = app.offsetWidth
        let span = 10
　　
　　　　　//获取一行能放几个盒子的个数
        let n = parseInt(len / (boxs[0].offsetWidth + span))
　　　　　　
　　　　　//收集盒子高度的数组
        let HAll = []
        let minH, index;
        for (let i = 0; i < boxs.length; i++) {
            if (n > i) {
                HAll.push(boxs[i].offsetHeight)
                boxs[i].style.position = 'static'
            } else {
                minH = Math.min.apply(null, HAll) //拿到收集高度数组中的最小高度
                index = HAll.indexOf(minH)　　// 拿到最小高度的索引
                boxs[i].style.position = 'absolute'
                boxs[i].style.top = minH + span + 'px'
                boxs[i].style.left = boxs[index].offsetLeft + 'px'
                HAll[index] = minH + boxs[i].offsetHeight + span //修改高度数组中最小的高度
            }
        }
    }
</script>

</html>

 

posted on 2023-01-09 14:31  久居我梦  阅读(38)  评论(0)    收藏  举报

导航