渲染图片高度不一致的瀑布流布局列表

代码示例

使用CSS的多列布局（column-count）来实现瀑布流效果。

每个图片容器（.masonry-item）都设置为inline-block，让它们在同一行显示，并且设置了宽度为100%。

图片（.masonry-img）的宽度也设置为100%，高度自适应，这样不同高度的图片就能正确显示在瀑布流布局中了。

你可以根据实际需求调整列数、间距等样式来适应你的布局。

<template>
	<div class="masonry">
		<div v-for="(item, index) in items" :key="index" class="masonry-item">
			<img :src="item.imageUrl" alt="Image" class="masonry-img">
			<view class="title">
				AI风景{{index+1}}
			</view>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						imageUrl: 'https://qiniu.mama-online.cn/static/createtypeicon1.png',
					},
					{
						imageUrl: 'https://qiniu.mama-online.cn/static/createtypeicon2.png'
					},
					{
						imageUrl: 'https://qiniu.mama-online.cn/static/assicon1.png'
					},
					{
						imageUrl: 'https://qiniu.mama-online.cn/static/assicon1.png'
					},
					{
						imageUrl: 'https://qiniu.mama-online.cn/static/createtypeicon4.png'
					},
					{
						imageUrl: 'https://qiniu.mama-online.cn/static/assicon1.png'
					},
					// Add more image objects with different heights
				]
			};
		}
	};
</script>

<style>
	.masonry {
		column-count: 2;
		/* 设置列数 */
		column-gap: 10px;
		/* 列之间的间距 */
	}

	.masonry-item {
		display: inline-block;
		margin-bottom: 10px;
		/* 图片之间的垂直间距 */
		width: 100%;
		/* 图片宽度填满整个列 */

		position: relative;
	}

	.title {
		position: absolute;
		bottom: 15px;
		left: 15px;
		color: #ffffff;
	}

	.masonry-img {
		width: 100%;
		/* 图片宽度填满容器 */
		height: auto;
		/* 高度自适应 */
	}
</style>

效果展示

虽然是丑了点,但是效果体现出来了.

其他实现的效果