CSS例子 ＞ 图片瀑布流布局(vue2)

<template><div class="container"><!-- 临时容器用于计算高度 --><div v-if="!isLayoutReady" class="temp-container"><divv-for="(item, index) in list":key="'temp-' + index":ref="(el) => (tempElements[index] = el)"class="item"><img :src="item.url" alt="" @load="handleImageLoad" /><!-- 其他内容结构需与正式渲染一致 --></div></div><!-- 正式渲染内容 --><template v-else><div class="column"><divv-for="(item, index) in leftList":key="'left-' + index"class="item"><img :src="item.url" alt="" /><div class="demo-title">{{ item.title }}</div><div class="demo-times">{{ item.descript }}</div><div class="demo-tag"><div class="demo-tag-owner">{{ item.tag[0] }}</div><div class="demo-tag-text">{{ item.tag[1] }}</div></div><div v-if="item.isDot" class="isDot">{{ item.isDot }}</div></div></div><div class="column"><divv-for="(item, index) in rightList":key="'right-' + index"class="item"><img :src="item.url" alt="" /><div class="demo-title">{{ item.title }}</div><div class="demo-times">{{ item.descript }}</div><div class="demo-tag"><div class="demo-tag-owner">{{ item.tag[0] }}</div><div class="demo-tag-text">{{ item.tag[1] }}</div></div><div v-if="item.isDot" class="isDot">{{ item.isDot }}</div></div></div></template></div>
</template>

<script>
export default {data() {return {list: [{url: "https://img0.baidu.com/it/u=4227008132,2843866888&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1084",title: "清新世界",descript: "一年之计在于春",tag: ["阳光", "活力四射"],isDot: "推荐",},{url: "http://img2.baidu.com/it/u=3364932024,431806429&fm=253&app=138&f=JPEG?w=800&h=1422",title: "雪国列车",descript: "雪花纷纷极具寒冷",tag: ["冰冻", "别具一格"],isDot: "推荐",},{url: "https://img0.baidu.com/it/u=600722015,3838115472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",title: "漂亮的小鸟",descript: "麻雀安知鸿鹄之志",tag: ["等待", "翘首以盼"],isDot: "",},{url: "https://img0.baidu.com/it/u=4227008132,2843866888&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1084",title: "清新世界",descript: "一年之计在于春",tag: ["阳光", "活力四射"],isDot: "推荐",},{url: "http://img2.baidu.com/it/u=3364932024,431806429&fm=253&app=138&f=JPEG?w=800&h=1422",title: "雪国列车",descript: "雪花纷纷极具寒冷",tag: ["冰冻", "别具一格"],isDot: "推荐",},],leftList: [],rightList: [],tempElements: [],loadedImages: 0,isLayoutReady: false,}},mounted() {this.preloadImages()},methods: {// 图片预加载preloadImages() {this.list.forEach((item) => {const img = new Image()img.src = item.url})},// 图片加载完成处理handleImageLoad() {this.loadedImages++if (this.loadedImages === this.list.length) {this.calculateLayout()}},// 计算瀑布流布局calculateLayout() {this.$nextTick(() => {const itemHeights = this.tempElements.map((el) => el.clientHeight)let leftHeight = 0let rightHeight = 0this.list.forEach((item, index) => {if (leftHeight <= rightHeight) {this.leftList.push(item)leftHeight += itemHeights[index]} else {this.rightList.push(item)rightHeight += itemHeights[index]}})this.isLayoutReady = true})},},
}
</script>

<style scoped>
.container {display: flex;gap: 20px;max-width: 400px; /* 调节卡片宽度 */margin: 0 auto;padding: 20px;
}.column {flex: 1;display: flex;flex-direction: column;gap: 20px;
}.item {position: relative;background: white;border-radius: 8px;padding: 15px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}.item img {width: 100%;/* height: auto;   */ /* 调节图片高度： 高度自适应,由图片自身决定,展示更具个性 */height: 68%;border-radius: 4px;margin-bottom: 12px;
}.demo-title {font-size: 18px;font-weight: 600;margin-bottom: 8px;color: #333;
}.demo-times {font-size: 14px;color: #666;margin-bottom: 12px;
}.demo-tag {display: flex;gap: 10px;
}.demo-tag-owner,
.demo-tag-text {padding: 4px 12px;border-radius: 20px;font-size: 12px;
}.demo-tag-owner {background: #fff0e6;color: #ff6600;border: 1px solid #ffd8c2;
}.demo-tag-text {background: #e6f7ff;color: #1890ff;border: 1px solid #b3e0ff;
}.isDot {position: absolute;top: 15px;right: 15px;background: #ff4d4f;color: white;padding: 4px 10px;border-radius: 4px;font-size: 12px;
}.temp-container {position: absolute;visibility: hidden;z-index: -1;
}
</style>