vue-masonry-自适应瀑布流

npm install vue-masonry --save -D

<div class="card-con">
    <div v-masonry fit-width="true" transition-duration="1s" item-selector=".card" origin-left="false">
        <div v-masonry-tile v-for="(val) in data_obj" :key="val['name']" class="card">
            <n-card  size="small" :title="val['name']" hoverable >
                <!-- ...... -->
            </n-card>
        </div>
    </div>
</div>

.card-con {
    width: 100%;
}
.card {
    width: 100%;
    max-width: 400px;
}

页面初次加载时，当请求数据很多的时候，由于数据还不全，所以可能会出现瀑布流的错位，这就需要我们在数据加载完之后，手动触发瀑布流的重加载，在此期间可以使用加载组件的loading，让页面显示转圈

function update() {
    loading = true
    new Promise((resolve,reject)=> {
        let num = 0
        for (const key in data_obj) {
            num = num + 1
            apis.capital_service_apis.query_k_json({
                // params
                }).then(res => {
                data_obj[key]['res'] = res['data']
                num = num - 1
                if (num === 0) {
                    resolve('end')
                }
            })
        }
    }).then(()=> {
        loading = false
        _this.$redrawVueMasonry();
        console.log(data_obj)
    })
}