vue3+ts实现瀑布流

父组件代码：

<template>
    <aaa :list="arr"></aaa>
</template>

<script setup lang="ts">
import aaa from './aaa.vue';
    const arr = [
    {
            width: 130,
            color: '#f44336',
            height: 100
        },
        {
            width: 130,
            color: '#4caf50',
            height: 20
        },
        {
            width: 130,
            color: '#e91e63',
            height: 60
        },
        {
            width: 130,
            color: '#cddc39',
            height: 40
        },
        {
            width: 130,
            color: '#ffeb3b',
            height: 140
        },
        {
            width: 130,
            color: '#ff9800',
            height: 160
        },
        {
            width: 130,
            color: '#795548',
            height: 120
        },
        {
            width: 130,
            color: '#607d8b',
            height: 80
        },      {
            width: 130,
            color: '#f44336',
            height: 100
        },
        {
            width: 130,
            color: '#4caf50',
            height: 20
        },
        {
            width: 130,
            color: '#e91e63',
            height: 60
        },
        {
            width: 130,
            color: '#cddc39',
            height: 40
        },
        {
            width: 130,
            color: '#ffeb3b',
            height: 140
        },
        {
            width: 130,
            color: '#ff9800',
            height: 160
        },
        {
            width: 130,
            color: '#795548',
            height: 120
        },
        {
            width: 130,
            color: '#607d8b',
            height: 80
        }
    ]

</script>

<style scoped>

</style>

组件代码：

<template>
    <div class="wraps">
        <div class="items" v-for="item in waterList" :style="{height:item.height+'px',width:item.width+'px',background:item.color,left:item.left+'px',top:item.top+'px'}"></div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

    const props = defineProps<{
        list: any[]
    }>()
    const waterList = reactive<any[]>([]);
    const heightList:number[] = [];
    const init = () => {
        const width = 130;
        const x = document.body.clientWidth;
        const column = Math.floor(x / width);
        console.log(column);

        for (let i = 0; i < props.list.length; i++) {
            if (i < column) {
                props.list[i].left = i * width;
                props.list[i].top = 0;
                waterList.push(props.list[i]);
                heightList.push(props.list[i].height)
            } else {
                let current = heightList[0];
                let index = 0;
                heightList.forEach((h, i) => {
                    if (current > h) {
                        current = h;
                        index = i;
                    }
                })
                props.list[i].top = current + 10;
                props.list[i].left = index * width;
                heightList[index] = heightList[index] + props.list[i].height + 10;
                waterList.push(props.list[i])
            }
        }
    }
    
    onMounted(() => {
        init();
    })

</script>

<style scoped>
.wraps {
    position: relative;
}
.items {
    position: absolute;
    margin: 0 5px;
    border-radius: 5px;
}
</style>