1. 解釋

• 瀑布流特征：

1. 等寬不等高：元素寬度固定，高度根據內容自適應。
2. 錯落排列：元素像瀑布一樣從上到下依次填充，自動尋找最短列插入

體現：圖中第一排1，2，3元素中，3是最短高度，就是該行最短列。

2. 形成結構和樣式

<template><div class="page-main"><div class="card"><!-- v-waterfall是自定義指令 屬性值是個回調函數--><div v-waterfall="el => updateLayout(el)" class="card-item" v-for="item in cardDate" :key="item.id":style="{ background: item.color, height: item.height }"><p class="text">{{ item.id }}</p></div></div></div>
</template>

//這是<script>data中的數據，結構是通過v-for遍歷的cardDate: [{ id: 1, color: '#76da6e', height: '100px' },{ id: 2, color: '#57c797', height: '80px' },{ id: 3, color: '#54cac7', height: '70px' },{ id: 4, color: '#b16dc7', height: '120px' },{ id: 5, color: '#dc933d', height: '130px' },{ id: 6, color: '#b74acf', height: '90px' },{ id: 7, color: '#d93e5a', height: '80px' },{ id: 8, color: '#5474dd', height: '100px' },{ id: 9, color: '#e42526', height: '120px' },{ id: 10, color: '#e86c92', height: '90px' }],

<style scoped>
/* .page-main {position: relative;
} */.card {position: relative;margin: 0 auto;width: calc(3 * 200px);/* 3列，每列200px寬度*/
}.card-item {/* 相對于最近的非static定位的祖先元素（.card）定位(0,0) */position: absolute;width: 200px;/* 使得內容居中（可省略） */display: flex;align-items: center;justify-content: center;color: black;font-size: 24px;/* 監聽到css樣式變化，過渡0.3s效果 */transition: all 0.3s;
}
</style>

未加上js動態計算每個元素的位置—初始樣子是將所有元素重疊在一起(如圖)

然后就要計算出每塊元素應該存在的位置（top和left）【css中每塊元素position都是absolute，而且沒有設置邊偏移，默認都是0】

DOM元素尺寸屬性不了解可以看這里有圖文說明

<script>
export default {name: 'App',data() {return {cardDate: [{ id: 1, color: '#76da6e', height: '100px' },{ id: 2, color: '#57c797', height: '80px' },{ id: 3, color: '#54cac7', height: '70px' },{ id: 4, color: '#b16dc7', height: '120px' },{ id: 5, color: '#dc933d', height: '130px' },{ id: 6, color: '#b74acf', height: '90px' },{ id: 7, color: '#d93e5a', height: '80px' },{ id: 8, color: '#5474dd', height: '100px' },{ id: 9, color: '#e42526', height: '120px' },{ id: 10, color: '#e86c92', height: '90px' }],columnHeights: [0, 0, 0] //每列元素的高度}},directives: {waterfall: {inserted(el, binding) {const callback = binding.value || {};callback(el);}}},methods: {updateLayout(item) {const column = this.getMinColumnHeight(this.columnHeights);//計算每個元素位移x軸和y軸距離const itemTop = this.columnHeights[column];const itemLeft = column * item.clientWidth;item.style.transform = `translate(${itemLeft}px,${itemTop}px)`;//此時該元素item已經定位完成//則重新跟新原本最短列為this.columnHeights[column] + item.offsetHeight； this.columnHeights[column] += item.offsetHeight;},getMinColumnHeight(arr) {let min = Math.min(...arr);return arr.indexOf(min) != -1 ? arr.indexOf(min) : 0;}},
}
</script>

3. 自定義指令

directives: {waterfall: {inserted(el, binding) {console.log(binding);const callback = binding.value || {};callback(el);}}},

el則是每個cart-item元素

(注:本文例子參考這個b站視頻，我進行了補充)