瀑布流布局

html

        <!-- 瀑布流商品卡 -->
        <div class="waterFall">
            <div class="item" v-for="(v,k) in boxes" :key="k">
                <div class="itemContent">
                ....
                </div>
            </div>
        </div>

css

    .waterFall {
        column-count: 2;
        column-gap: 0;
        padding-bottom: 40px;
        .item {
            box-sizing: border-box;
            break-inside: avoid;
            padding: 5px;
            .itemContent {
                background-color: #fff;
                img {
                    width: 100%;
                }
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 10px;
                height: auto;
                font-size: 20px;
                color: #686868;
                box-sizing: border-box;
                border: 1px solid #ccc;
                border-radius: 4px;
            }
        }
    } 

这里的 column-count 属性是用来控制一行有几列的