大家應(yīng)該都發(fā)過微信朋友圈，它最多發(fā)9張圖片稽亏，不知大家有沒有思考過，微信朋友圈的九宮格構(gòu)圖是怎么實現(xiàn)的砖瞧，本篇博客將帶領(lǐng)大家采用CSS就實現(xiàn)朋友圈這一功能拒啰。
四種情況
朋友圈發(fā)送1~9張不等數(shù)量的圖片的時候荞怒，樣式會有所變化轴或，大體可分為以下4種情況尝哆。
-
一張圖片匈庭，此時會完整的將整張圖片展示出來
微信圖片_20211222182657.jpg -
2~3張圖片夫凸，每張圖片都會進(jìn)行縮小，且大小一樣阱持，且在第一排依次排開（一排最多3張）
微信圖片_20211222182651.jpg
微信圖片_20211222182641.jpg
-
4張圖片夭拌，每張圖片都會進(jìn)行縮小，且大小一樣衷咽，每排各2張
微信圖片_20211222182632.jpg -
5~9張圖片鸽扁，每張圖片都會進(jìn)行縮小，且大小一樣镶骗，每排各3張圖桶现，依次排列。
微信圖片_20211222182645.jpg
代碼分析
采用nth-child() 和nth-last-child()選擇器
:nth-child(n)
/* 選擇器匹配屬于其父元素的第 N 個子元素鼎姊，不論元素的類型骡和。
n 可以是數(shù)字、關(guān)鍵詞或公式相寇。 */
:nth-last-child(n)
/* 選擇器匹配屬于其元素的第 N 個子元素的每個元素慰于，不論元素的類型，從最后一個子元素開始計數(shù)唤衫。
n 可以是數(shù)字东囚、關(guā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>
如果本文能對大家有所幫助的話植兰，點個再走吧~
歡迎大家 交流~
