2024-10-24 瀑布流（vue3）

效果图：

 代码：

 

<template><div id="waterfallContainer" class="waterfall-container"><div v-for="(column, columnIndex) in columns" :key="columnIndex" class="waterfall-column"><div v-for="(item, index) in column" :key="item.src" class="waterfall-box"><img :src="item.src" :alt="item.alt" class="waterfall-box-img" /></div></div></div>
</template><script>
export default {name: 'wfBox',
};
</script><script setup>
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';const items = ref([{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410241144-1al.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410241141-w5j.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410241136-7g2.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410181836-1u4.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410220732-rbx.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410181343-qb7.png-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410170337-gm2.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410180531-qm2.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410180928-a1h.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410231720-qhe.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410210850-80j.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410171644-ff8.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410170324-3h8.jpg-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410180526-lrg.webp-compress80',},{        src: 'https://img.thetigerhood.com/wp-content/uploads/2024/10/2410131545-jls.jpg-compress80',}
]);const columnsCount = ref(4); // 列数  
const columnHeights = ref(Array(columnsCount.value).fill(0)); // 每列的高度  // 根据当前列高度找到最低高度的列索引  
const findShortestColumn = () => {let minHeight = Infinity;let columnIndex = 0;for (let i = 0; i < columnHeights.value.length; i++) {if (columnHeights.value[i] < minHeight) {minHeight = columnHeights.value[i];columnIndex = i;}}return columnIndex;
};// 将图片分配到列中  
const distributeItems = () => {const columns = Array.from({ length: columnsCount.value }, () => []);items.value.forEach(item => {const columnIndex = findShortestColumn();columns[columnIndex].push(item);columnHeights.value[columnIndex] += 200; // 假设每张图片的高度为200px（这里需要动态计算或设置实际高度）  
    });return columns;
};const columns = computed(() => distributeItems());onMounted(() => {window.addEventListener('resize', () => {columnsCount.value = Math.floor(window.innerWidth / 200); // 假设每列宽度为200px（需要调整）  columnHeights.value = Array(columnsCount.value).fill(0);});
});onUnmounted(() => {window.removeEventListener('resize', () => { });
});
</script><style scoped>
.waterfall-container {display: flex;flex-wrap: wrap;gap: 0;margin-top: 12px;padding: 0;box-sizing: border-box;
}.waterfall-column {flex: 1 0 calc(20% - 16px);/* 假设5列，每列宽度为20%，减去gap */box-sizing: border-box;
}.waterfall-box {width: 100%;box-sizing: border-box;cursor: pointer;
}.waterfall-box-img {width: 100%;height: auto;display: block;
}/* 响应式布局调整 */
@media (max-width: 1200px) {.waterfall-column {flex: 1 0 calc(25% - 16px);/* 4列 */}
}@media (max-width: 768px) {.waterfall-column {flex: 1 0 calc(50% - 16px);/* 2列 */}
}@media (max-width: 480px) {.waterfall-column {flex: 1 0 100%;/* 1列 */}
}
</style>