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>