CSS3 columns+break-inside实现瀑布流布局

<template>
    <div class="columns">
        <div class="column column_1"></div>
        <div class="column column_2"></div>
        <div class="column column_3"></div>
        <div class="column column_4"></div>
        <div class="column column_5"></div>
        <div class="column column_6"></div>
    </div>
</template>

<style lang='scss' scoped>
    .columns {
        width: 800px;
        columns: 200px 3; // column-width宽度会自动铺满父元素, 会将与你设置的column-width作比较，哪个width大就用哪个
        column-gap: 20px; // 列之间的间隙
        column-rule: 1px solid skyblue; // 列之间的边框样式
        .column {
            break-inside: avoid; // 避免在元素内出现页、列、区域中断
            overflow: auto;
            background-color: #eee;
            margin-bottom: 20px;
            border-radius: 16px;
        }
    }
    .column_1 {
        height: 200px;
    }
    .column_2 {
        height: 300px;
    }
    .column_3 {
        height: 300px;
    }
    .column_4 {
        height: 200px;
    }
    .column_5 {
        height: 100px;
    }
    .column_6 {
        height: 400px;
    }
</style>