html css js 瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>瀑布流</title>
    <style>
        body {
            padding: 0 100px;
        }

        .ct {
            position: relative;
        }

        .item {
            box-sizing: border-box;
            position: absolute;
            width: 200px;
            background: #ccc;
            height: 100px;
            margin: 5px;
            padding: 5px;
            font-size: 1.5rem;
            color: #fff;
            transition: all 1s;
        }

        .h1 {
            height: 100px;
            background: #8A2BE2;
        }

        .h2 {
            height: 120px;
            background: #A52A2A;
        }

        .h3 {
            height: 140px;
            background: #5F9EA0;
        }

        .h4 {
            height: 160px;
            background: #D2691E;
        }

        .h5 {
            height: 180px;
            background: #6495ED;
        }

        .h6 {
            height: 200px;
            background: #FF8C00;
        }

        .h7 {
            height: 220px;
            background: #ADFF2F;
        }

        .h8 {
            height: 240px;
            background: #00FA9A;
        }

    </style>

</head>
<body>
    <div class="ct">
        <div class="item h2">1</div>
        <div class="item h1">2</div>
        <div class="item h5">3</div>
        <div class="item h7">4</div>
        <div class="item h3">5</div>
        <div class="item h6">6</div>
        <div class="item h4">7</div>
        <div class="item h8">8</div>
        <div class="item h3">9</div>
        <div class="item h6">10</div>
        <div class="item h4">11</div>
        <div class="item h7">12</div>
        <div class="item h2">13</div>
        <div class="item h1">14</div>
        <div class="item h6">15</div>
        <div class="item h4">16</div>
        <div class="item h3">17</div>
        <div class="item h2">18</div>
        <div class="item h1">19</div>
        <div class="item h4">20</div>
        <div class="item h6">21</div>
        <div class="item h4">22</div>
        <div class="item h8">23</div>
        <div class="item h3">24</div>
        <div class="item h6">25</div>
        <div class="item h4">26</div>
        <div class="item h7">27</div>
        <div class="item h2">28</div>
        <div class="item h1">29</div>
        <div class="item h6">30</div>
        <div class="item h6">31</div>
        <div class="item h4">32</div>
        <div class="item h3">33</div>
        <div class="item h1">34</div>
    </div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script>
    var water = (function(){
        function init(){
            waterfull()
            $(window).on("resize", function(){
                waterfull()
            })
        }

        function waterfull(){
            var $ct = $(".ct"),
                $item = $(".item")
            var itemArr = []
            var itemLen = parseInt($ct.outerWidth(true)/$item.outerWidth(true))

            for(var i=0; i<itemLen; i++){
                itemArr[i] = 0;
            }

            $item.each(function(){
                var minValue = Math.min.apply(null, itemArr)
                var minIndex = itemArr.indexOf(minValue)

                $(this).css({
                    top: itemArr[minIndex],
                    left: $(this).outerWidth(true) * minIndex
                })

                itemArr[minIndex] += $(this).outerHeight(true)
            })
        }

        return {
            init: init
        }
    })()

    water.init()
/*
    waterfull()

    $(window).on("resize", function(){
        waterfull()
    })

    function waterfull(){
        var $ct = $(".ct"),
            $item = $(".item")

        var itemArr = []
        var itemLen = parseInt($ct.outerWidth(true)/$item.outerWidth(true))

        for(var i=0; i<itemLen; i++){
            itemArr[i] = 0;
        }

        $item.each(function(){
            var minValue = Math.min.apply(null, itemArr)
            var minIndex = itemArr.indexOf(minValue)

            $(this).css({
                top: itemArr[minIndex],
                left: $(this).outerWidth(true) * minIndex
            })

            itemArr[minIndex] += $(this).outerHeight(true)
        })
    }
    */
</script>



</body>
</html>
from: https://www.jianshu.com/p/c7655bf67261