【uniapp】内容瀑布流

xixixin_2025-03-25 20:56

【uniapp】内容瀑布流

html 复制代码

<view class="content_ padding-20">
  <view v-for="(c, index) in contentList" class="border-r-20 margin-b-20">
    <!-- mode="widthFix" 表示图片按宽度等比例缩放 -->
    <image :src="c.picture" mode="widthFix"></image>
    <view class="t-center padding-tb-20">
	    {{ c.name }}
	</view>
  </view>
</view>

css 复制代码

// 内容瀑布流
.content_ {
    box-sizing: border-box;
    /* 定义两列布局 */
	column-count: 2;
    /* 设置列与列之间的间距 */
	column-gap: 20rpx;
	.border-r-20 {
        /* 防止元素被拆分到两列 */
		break-inside: avoid;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	image {
        /* 让图片占满容器（不需要设置高，形成瀑布流） */
		width: 100%;
	}
}

如果不写 mode="widthFix"，默认模式 scaleToFill 可能会导致图片被拉伸或压缩，导致显示异常