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;
}