css3實現瀑布流

1、html代碼

<div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

2、css代碼

@media screen and (max-width: 800px) {
            body .box{
                -moz-column-count: 4;
                /* Firefox */
                -webkit-column-count: 4;
                /* Safari 和 Chrome */
                column-count: 4;
            }
        }

        @media screen and (max-width: 500px) {
            body .box{
                -moz-column-count: 3;
                /* Firefox */
                -webkit-column-count: 3;
                /* Safari 和 Chrome */
                column-count: 3;
            }
        }

        .item {
            height: 123px;
            padding: 1em;
            margin-top: 1em;
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            border: 1px solid #000;
            /* background: #909090; */
        }

        .item:nth-of-type(1) {
            margin-top: 0;
        }

        .box {
            -moz-column-count: 5;
            /* Firefox */
            -webkit-column-count: 5;
            /* Safari 和 Chrome */
            column-count: 5;
            -moz-column-gap: 1em;
            -webkit-column-gap: 1em;
            column-gap: 1em;
        }

3、js代碼

<script>
        (function (W, D) {
            var items = D.querySelectorAll('.item')
            items.forEach((v, i) => {
                let height = getHeight()
                let color = getColor()
                console.log(height, color)
                v.setAttribute('style', 'height: ' + height + 'px;background:' + color + ';')
            })
            function getHeight() {
                return Math.floor(Math.random() * 200) + 100
            }
            function getColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
                return color;
            }
        })(window, document)
    </script>