纯css瀑布流效果

css代码

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            -moz-column-count: 3;
            -webkit-column-count: 3;
            column-count: 3;
            -moz-column-gap: 10px;
            -webkit-column-gap: 10px;
            column-gap: 10px;
            width: 80%;
            margin: 2em auto;

        }

        .test {

            margin-bottom: 10px;
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            background: #f60;
        }

        @media screen and (max-width: 800px) {
            .box {
                column-count: 2;
            }
        }

        @media screen and (max-width: 500px) {
            .box {
                column-count: 1;
            }
        }
    </style>

html代码

<div class="box">
        <div class="test" style="height: 50px"></div>
        <div class="test" style="height: 20px"></div>
        <div class="test" style="height: 50px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
        <div class="test" style="height: 90px"></div>
    </div>