【uni】微信朋友圈图片九宫格样式

html

	<view class="_contentimgList">
		<view class="wrap" v-for="(bean,index) in imgList" :key="index">
			<image :src="bean" mode="heightFix" />
		</view>
	</view>	

imgList: [图1，图1，图1，图1],//图片数组结构

css代码

._contentimgList {
				display: flex;
				flex-wrap: wrap;
				margin: 10rpx 0;


				.wrap {

					position: relative;
					overflow: hidden;
					// margin-bottom: 2%;
				}

				/*  3张图片  */
				.wrap:nth-child(1):nth-last-child(3),
				.wrap:nth-child(2):nth-last-child(2),
				.wrap:nth-child(3):nth-last-child(1) {
					width: 32%;
					image{
						height: 200rpx;
					}
				}

				/*  间隔  */
				.wrap:nth-child(2):nth-last-child(2),
				.wrap:nth-child(3):nth-last-child(1) {
					margin-left: 2%;
				}

				.wrap:not(:nth-child(1):nth-last-child(1)) img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}

				/*  2张图片  */
				.wrap:nth-child(1):nth-last-child(2),
				.wrap:nth-child(2):nth-last-child(1),
				/*  4张图片  */
				.wrap:nth-child(1):nth-last-child(4),
				.wrap:nth-child(2):nth-last-child(3),
				.wrap:nth-child(3):nth-last-child(2),
				.wrap:nth-child(4):nth-last-child(1) {
					width: 49%;
					image{
						height: 240rpx;
					}
				}

				/* 每行的两张图片中间间隔2%的宽度 */
				/*  2张图片  */
				.wrap:nth-child(2):nth-last-child(1),
				/*  4张图片  */
				.wrap:nth-child(2):nth-last-child(3),
				.wrap:nth-child(4):nth-last-child(1) {
					margin-left: 2%;
				}

				/*  5张以上图片  */
				.wrap:nth-child(n + 5),
				.wrap:nth-child(1):nth-last-child(n + 5),
				.wrap:nth-child(1):nth-last-child(n + 5)~.wrap {
					width: 32%;
					padding-bottom: 1%;
					image{
						height: 200rpx;
					}
				}

				.wrap:nth-child(n + 5):not(:nth-child(3n + 1)),
				.wrap:nth-child(1):nth-last-child(n + 5)~.wrap:not(:nth-child(3n + 1)) {
					margin-left: 2%;
				}

			}