基于Vue3 JS setup语法糖的万金油前端瀑布流

前言：

我们在许多应用上都使用了瀑布流布局。那什么是瀑布流布局呢（waterfull）？瀑布流布局我认为是一种高度不对齐的网格形式（个人理解）。今天则介绍一下如何通过js来实现瀑布流布局。

实现效果

实现原理：

一、放置两个个div框（以两列的瀑布流布局为例，具体看实现代码）

        <div style="display: flex;flex-direction: row;margin-top: 10px;">
            <div style="width: 10%;height: 300px;margin-left: 10px;">
                <div v-for="item in list1" :key="item" style="text-align: center;border: 1px solid black;margin-top: 3px" :style="{height:Math.floor(Math.random()*200) + 'px'}">{{ item }}</div>
            </div>
            <div style="width: 10%;height: 300px;margin-left: 2px;">
                <div v-for="item in list2" :key="item" style="text-align: center;border: 1px solid black;margin-top: 3px;" :style="{height:Math.floor(Math.random()*200) + 'px'}">{{ item }}</div>
            </div>
        </div>

二、处理数据（我这里以静态数据为例，与后端数据处理形式相同，具体实现看代码）。

const list = ["1","2","3","4","5","6"];
const list1 = ref([]);
const list2 = ref([]);
for(let i = 0; i < list.length; i ++){
    if(i % 2 == 0){
        list1.value.push(list[i])
    }else if(i % 2 == 1){
        list2.value.push(list[i])
    }
}

上述代码中主要用到了求余的思想，将数据分别存于两个数组中。以上就是实现的具体方法，有什么错误和不懂的地方可以在评论区指出。