<template>
<div class="waterfall-grid">
<div v-for="(columnItems, columnIndex) in columns" :key="columnIndex">
<div v-for="(item, index) in columnItems" :key="index" class="item">
<image :src="item.image" mode="widthFix" />
</div>
</div>
</div>
</template>
<script setup>
import {
ref,
onMounted
} from 'vue';
const items = ref([{
image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.v1jIyXQmBQ_B8YEEeGFu3QHaNH?w=187&h=332&c=7&r=0&o=5&pid=1.7'
},
{
image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.z34uJPz2bm7fqakIckHVnAHaLH?w=197&h=296&c=7&r=0&o=5&pid=1.7'
},
{
image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.2zd6VjunSEhgIOVfmMFXZAHaNK?pid=ImgDet&rs=1'
},
{
image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.BD8Gun2dXm_3Zuue4HVmJAHaKX?w=197&h=275&c=7&r=0&o=5&pid=1.7'
},
{
image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.v1jIyXQmBQ_B8YEEeGFu3QHaNH?w=187&h=332&c=7&r=0&o=5&pid=1.7'
},
{
image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.z34uJPz2bm7fqakIckHVnAHaLH?w=197&h=296&c=7&r=0&o=5&pid=1.7'
},
{
image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.2zd6VjunSEhgIOVfmMFXZAHaNK?pid=ImgDet&rs=1'
},
{
image: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.BD8Gun2dXm_3Zuue4HVmJAHaKX?w=197&h=275&c=7&r=0&o=5&pid=1.7'
},
]);
const columns = ref();
// 计算列数和每列的图片
const computeColumns = () => {
const numColumns = 2; // 每行两列,可根据需要调整
columns.value = Array.from({
length: numColumns
}, () => []); //根据numColumns数量创建多少个数组
items.value.forEach((item, index) => {
const columnIndex = index % numColumns;
columns.value[columnIndex].push(item);
});
};
onMounted(() => {
computeColumns();
});
</script>
<style scoped lang="scss">
.waterfall-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);/* 每行两列,可根据需要调整 */
gap: 10px;
padding: 10px;
}
.item {
margin-bottom: 5px;
image {
width: 100%;
}
}
</style>