瀑布流（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">
                <div class="w_item">
                    <img :src="item.src" :alt="item.alt" class="waterfall-box-img" />
                    <div class="w_text">{{ item.content }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'wfBox',
};
</script>

<script setup>
import { ref, onMounted, onUnmounted, reactive, computed } from 'vue';


const arrlist  = ref([
    {
        content: '翡翠手镯',
        src:require('@/assets/computer/gem/img01.jpeg'),
    },{
        content: '翡翠戒指',
        src:require('@/assets/computer/gem/img02.jpg'),
    },{
      content: '翡翠手镯',
        src:require('@/assets/computer/gem/img03.png'),
    },{
      content: '翡翠手镯',
      src:require('@/assets/computer/gem/img04.webp'),
    },{
      content: '翡翠戒指',
        src:require('@/assets/computer/gem/img05.jpg'),
    },{
      content: '翡翠手镯',
      src:require('@/assets/computer/gem/img06.webp'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img07.jpg'),
    },{
      content: '翡翠项链',
      src:require('@/assets/computer/gem/img08.jpg'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img09.jpg'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img10.jpg'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img11.jpg'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img12.jpg'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img13.jpg'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img14.jpg'),
    },{
      content: '翡翠戒指',
      src:require('@/assets/computer/gem/img15.jpg'),
    },

 ])


const columnsCount = ref(3); // 列数  
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 }, () => []);
    arrlist.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>
.w_item{
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
    margin-bottom: 0.1rem;
}
.w_text{
    width: 100%;
    text-align: center;
    padding: 0.12rem 0;
}
.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>