一、整理思路

• 實際場景中，瀑布流一般由 父組件 提供 數據列表，子組件渲染
• 每個圖片都是根據容器進行 絕對定位 ，從而定好自己的位置
• 取出 屏幕的寬度，設定 圖片的寬度 固定 為一個值，計算可以鋪 多少列
• 按列數 先鋪上第一行（left、top 值）
• 第一行鋪滿以后，后面的每一張都要 鋪在高度最低的列，這是瀑布流的核心！所以要維護一個 長度為 列數 的 列高度數組 用于比較
• 總結：每次放置一張圖，都要計算它的 left、top 值丟進瀑布流數組中，并且更新 列高度數據 便于下次對比

二、代碼

父組件

<WaterFall :list="list" />

// 模擬列表數據
const list = [{height: 300,background: "red",},{height: 400,background: "pink",},{height: 500,background: "blue",},{height: 200,background: "green",},{height: 300,background: "gray",},{height: 400,background: "#CC00FF",},{height: 200,background: "gray",},{height: 100,background: "#996666",},{height: 500,background: "skyblue",},{height: 300,background: "#993366",},{height: 100,background: "#33FF33",},{height: 400,background: "skyblue",},{height: 200,background: "#6633CC",},{height: 300,background: "#666699",},{height: 300,background: "#66CCFF",},{height: 300,background: "skyblue",},{height: 200,background: "#CC3366",},{height: 200,background: "#CC9966",},{height: 200,background: "#FF00FF",},{height: 500,background: "#990000",},{height: 400,background: "red",},{height: 100,background: "#999966",},{height: 200,background: "#CCCC66",},{height: 300,background: "#FF33FF",},{height: 400,background: "#FFFF66",},{height: 200,background: "red",},{height: 100,background: "skyblue",},{height: 200,background: "#33CC00",},{height: 300,background: "#330033",},{height: 100,background: "#0066CC",},{height: 200,background: "skyblue",},{height: 100,background: "#006666",},{height: 200,background: "yellow",},{height: 300,background: "skyblue",},{height: 120,background: "#33CCFF",},{height: 400,background: "#999966",},{height: 630,background: "#CC9966",},{height: 250,background: "#33FF00",},{height: 300,background: "yellow",},{height: 500,background: "green",},
];

子組件

<template><div class="list"><divclass="item"v-for="(item, index) in waterList":style="{width: width + 'px',height: item.height + 'px',left: item.left + 'px',top: item.top + 'px',background: item.background,}">{{ index }}</div></div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";const props = defineProps<{list: any[];
}>();// 圖片寬度
const width = 120;
// 圖片上下間距
const gap = 20;
// 瀑布流數組
const waterList = ref<any[]>([]);
// 列高度數組
const heightList = reactive<number[]>([]);// 屏幕寬度需要在 mounted 之后拿到
onMounted(() => {// 計算列數const column = Math.floor(document.body.clientWidth / width);// 核心內容就是維護每個圖片的 left、topfor (let i = 0; i < props.list.length; i++) {// 先鋪上第一行（i < column 則表示是第一行）if (i < column) {props.list[i].top = 0;props.list[i].left = width * i;// 塞進瀑布流waterList.value?.push(props.list[i]);// 高度數據更新heightList[i] = props.list[i].height;}// 后面的就要一張張塞進去，每次找出最低的列往里塞else {// 最低的高度，先默認為第一列高度let current = heightList[0];// 最低的列，先默認為第一個let col = 0;// 循環每一列進行比較heightList.forEach((h, i) => {if (h < current) {current = h;col = i;}});console.log("最低的列", col, "高度為", current);// 由此計算出該圖片的 left、topprops.list[i].left = col * width;props.list[i].top = current + gap;// 塞進瀑布流waterList.value.push(props.list[i]);// 更新列高度數組heightList[col] = current + gap + props.list[i].height;}}console.log("waterList", waterList.value);console.log("heightList", heightList);
});
</script>
<style lang="scss" scoped>
.list {position: relative;height: 100%;overflow: auto;.item {position: absolute;font-size: 30px;}
}
</style>

效果如圖