vue3瀑布流

<template>
    <div class="waterfall-grid">
        <div v-for="(columnItems, columnIndex) in columns" :key="columnIndex">
            <div v-for="(item, index) in columnItems" :key="index" class="item">
                <image :src="item.image" mode="widthFix" />
            </div>
        </div>
    </div>
</template>

<script setup>
    import {
        ref,
        onMounted
    } from 'vue';
    const items = ref([{
            image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.v1jIyXQmBQ_B8YEEeGFu3QHaNH?w=187&h=332&c=7&r=0&o=5&pid=1.7'
        },
        {
            image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.z34uJPz2bm7fqakIckHVnAHaLH?w=197&h=296&c=7&r=0&o=5&pid=1.7'
        },
        {
            image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.2zd6VjunSEhgIOVfmMFXZAHaNK?pid=ImgDet&rs=1'
        },
        {
            image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.BD8Gun2dXm_3Zuue4HVmJAHaKX?w=197&h=275&c=7&r=0&o=5&pid=1.7'
        },
        {
            image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.v1jIyXQmBQ_B8YEEeGFu3QHaNH?w=187&h=332&c=7&r=0&o=5&pid=1.7'
        },
        {
            image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.z34uJPz2bm7fqakIckHVnAHaLH?w=197&h=296&c=7&r=0&o=5&pid=1.7'
        },
        {
            image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.2zd6VjunSEhgIOVfmMFXZAHaNK?pid=ImgDet&rs=1'
        },
        {
            image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.BD8Gun2dXm_3Zuue4HVmJAHaKX?w=197&h=275&c=7&r=0&o=5&pid=1.7'
        },
    ]);
    const columns = ref();
    // 计算列数和每列的图片
    const computeColumns = () => {
        const numColumns = 2; // 每行两列，可根据需要调整
        columns.value = Array.from({
            length: numColumns
        }, () => []); //根据numColumns数量创建多少个数组
        
        items.value.forEach((item, index) => {
            const columnIndex = index % numColumns;
            columns.value[columnIndex].push(item);
        });
    };
    onMounted(() => {
        computeColumns();
    });
</script>

<style scoped lang="scss">
    .waterfall-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);/* 每行两列，可根据需要调整 */
        gap: 10px;
        padding: 10px;
    }
    .item {
        margin-bottom: 5px;
        image {
            width: 100%;
        }
    }
</style>