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

“真誠服務(wù)，讓網(wǎng)絡(luò)創(chuàng)造價值”是我們的服務(wù)理念，創(chuàng)新互聯(lián)團隊十余年如一日始終堅持在網(wǎng)站建設(shè)領(lǐng)域,為客戶提供優(yōu)質(zhì)服。不管你處于什么行業(yè)，助你輕松跨入“互聯(lián)網(wǎng)+”時代，PC網(wǎng)站+手機網(wǎng)站+公眾號+重慶小程序開發(fā)。

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

可以發(fā)現(xiàn)除1張圖片，4張圖片特殊外，其他數(shù)量圖片均使用一行三列的方式排列；

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

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

1、首先我們使用flex實現(xiàn)正常的三列布局:

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

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選擇器判斷為一張圖片時，改變圖片大小即可;

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

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

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

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

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

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

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

以上是“css如何實現(xiàn)朋友圈照片排列布局的代碼”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：css如何實現(xiàn)朋友圈照片排列布局的代碼-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://www.rwnh.cn/article10/epjgo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計公司、做網(wǎng)站、App開發(fā)、云服務(wù)器、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)