效果图:
代码:
<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>