【uniapp】内容瀑布流
<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>
// 内容瀑布流
.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 可能会导致图片被拉伸或压缩,导致显示异常