大家应该都发过微信朋友圈，它最多发9张图片，不知大家有没有思考过，微信朋友圈的九宫格构图是怎么实现的，本篇博客将带领大家采用CSS就实现朋友圈这一功能。
四种情况
朋友圈发送1~9张不等数量的图片的时候，样式会有所变化，大体可分为以下4种情况。
-
一张图片，此时会完整的将整张图片展示出来
微信图片_20211222182657.jpg
-
2~3张图片，每张图片都会进行缩小，且大小一样，且在第一排依次排开（一排最多3张）
微信图片_20211222182651.jpg
微信图片_20211222182641.jpg
-
4张图片，每张图片都会进行缩小，且大小一样，每排各2张
微信图片_20211222182632.jpg
-
5~9张图片，每张图片都会进行缩小，且大小一样，每排各3张图，依次排列。
微信图片_20211222182645.jpg
代码分析
采用nth-child() 和nth-last-child()选择器
:nth-child(n)
/* 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。 */
:nth-last-child(n)
/* 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。 */
一张图片的时候，我们直接将图片展示出来就可以了
.box {
display: flex;
flex-wrap: wrap;
}
.imageBox {
position: relative;
overflow: hidden;
margin-bottom: 2%;
width: 300px;
}
<div class="box">
<div class="imageBox">
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
</div>
</div>
1.jpg
2或3张图片时,图片排列在同一行
/* 2/3 */
.imageBox img:nth-child(1):nth-last-child(2),
.imageBox img:nth-child(2):nth-last-child(1),
.imageBox img:nth-child(1):nth-last-child(3),
.imageBox img:nth-child(2):nth-last-child(2),
.imageBox img:nth-child(3):nth-last-child(1) {
width: 32%;
}
2.jpg
3.jpg
每一行只有两个图片，且两张图片各占一半左右的宽度
/* 4 */
.imageBox img:nth-child(1):nth-last-child(4),
.imageBox img:nth-child(2):nth-last-child(3),
.imageBox img:nth-child(3):nth-last-child(2),
.imageBox img:nth-child(4):nth-last-child(1) {
width: 49%;
}
4.jpg
和3种图片的时候排版是一样的，但是我们可以简化写法
/* 5~9 */
.imageBox img:nth-child(1):nth-last-child(n + 5),
.imageBox img:nth-child(1):nth-last-child(n + 5)~img {
width: 32%;
}
9.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模拟微信朋友圈九宫格排版</title>
<style>
.box {
display: flex;
flex-wrap: wrap;
}
.imageBox {
position: relative;
overflow: hidden;
margin-bottom: 2%;
width: 300px;
}
/* 2/3 */
.imageBox img:nth-child(1):nth-last-child(2),
.imageBox img:nth-child(2):nth-last-child(1),
.imageBox img:nth-child(1):nth-last-child(3),
.imageBox img:nth-child(2):nth-last-child(2),
.imageBox img:nth-child(3):nth-last-child(1) {
width: 32%;
}
/* 4 */
.imageBox img:nth-child(1):nth-last-child(4),
.imageBox img:nth-child(2):nth-last-child(3),
.imageBox img:nth-child(3):nth-last-child(2),
.imageBox img:nth-child(4):nth-last-child(1) {
width: 49%;
}
/* 5张以上图片 */
.imageBox img:nth-child(1):nth-last-child(n + 5),
.imageBox img:nth-child(1):nth-last-child(n + 5)~img {
width: 32%;
}
</style>
</head>
<body>
<div class="box">
<div class="imageBox">
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<!-- <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" />
<img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" /> -->
</div>
</div>
</body>
</html>
如果本文能对大家有所帮助的话，点个再走吧~
欢迎大家 交流~
网友评论