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

实现如图，只需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;
		  	}
		}
	
	}