css如何實現朋友圈照片排列布局的代碼

小編給大家分享一下css如何實現朋友圈照片排列布局的代碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

首先可以打開朋友圈觀察不同圖片數量的幾種布局,也可參考下圖示例；

可以發現除1張圖片，4張圖片特殊外，其他數量圖片均使用一行三列的方式排列；

假設有如下HTML代碼，這里imgList是一個圖片地址數組；

<ul>
    <li v-for="(item, index) in imgList" :key=index >
        <img :src="item">
    </li>
</ul>

1、首先我們使用flex實現正常的三列布局:

設置為換行，每個元素占1/3或指定寬度，除每行最后一個元素（3n）都設置margin-right并通過預留間隔；

ul{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
li{
  width: 32%; 
  height: 100px;
  margin-top: 5px;
}
.list:not(:nth-child(3n)) {
  margin-right: 2%;
}

2、對于只有一張圖片情況，只需用css選擇器判斷為一張圖片時，改變圖片大小即可;

選擇器邏輯：元素為 倒數第一個元素 && 第一個元素 時，則可判斷只有一個元素：對其樣式單獨設置覆蓋原樣式即可

ul li: nth-last-child(1): first-child{
  width: 200px;
  height: 200px;
}

3、對于四張圖片的情況時，圖片需呈 兩行兩列布局：這里就需對此種情況下的第二張圖片添加margin-right實現三列變兩列：

選擇器邏輯： 元素為 倒數第4個 && 第一個的元素時， 判斷為共有四個元素，
再選擇 其后的 同級元素 的第 2n 個后添加margin-right屬性；

ul li: nth-last-child(4): first-child ~ li: nth-child(2n){
  margin-right: 32%;
}

再次之前需對第三個元素恢復間隔，或同朋友圈類似，四張照片是不顯示間隔，如有需求也可設置其他屬性，如下：（此屬性需在上一條屬性之前）

ul li: nth-last-child(4): first-child , ul li: nth-last-child(4): first-child ~ li{
  width: 50%;
  margin-right: 0;
}

以上是“css如何實現朋友圈照片排列布局的代碼”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！