两行两列瀑布流图片排列布局（uniapp、小程序）

最新推荐文章于 2025-03-22 12:02:25 发布

小墨摘星星

最新推荐文章于 2025-03-22 12:02:25 发布

阅读量1.7k

点赞数

文章标签： uni-app

本文链接：https://blog.csdn.net/weixin_58387292/article/details/127744583

版权

本文介绍如何仅使用HTML和SCSS来实现响应式的图片网格布局。通过设置适当的CSS属性，例如`column-count`和`break-inside`等，可以确保图片能够自适应不同屏幕尺寸，并保持良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现如图，只需html与scss

html部分

<view class="photo">
	<view class="items">
		<image src="/static/images/association/fc1.png" mode='widthFix' bindtap="viewImage"></image>
	</view>
	<view class="items">
		<image src="/static/images/association/fc2.png" mode='widthFix' bindtap="viewImage"></image>
	</view>
	<view class="items">
		<image src="/static/images/association/fc3.png" mode='widthFix' bindtap="viewImage"></image>
	</view>
	<view class="items">
		<image src="/static/images/association/fc4.png" mode='widthFix' bindtap="viewImage"></image>
	</view>
	<view class="items">
		<image src="/static/images/association/fc5.png" mode='widthFix' bindtap="viewImage"></image>
	</view>
	<view class="items">
		<image src="/static/images/association/fc6.png" mode='widthFix' bindtap="viewImage"></image>
	</view>
</view>

scss部分

.photo{
		margin-top: 12rpx;
		column-gap: 0;
		column-count: 2;
		  // padding: 10rpx 10rpx 10rpx 15rpx;
		 
		.items{
		  width: 100%; 
		  break-inside: avoid;
		  image{
		  	  width: 100%;
		  	  border-radius: 5rpx;
		  	}
		}
	
	}