css實現(xiàn)朋友圈照片排列布局的代碼
發(fā)布時間：2020-06-10 15:48:54 作者：龐永勝 
我要評論
我要評論純css實現(xiàn)朋友圈不同數(shù)量圖片不同布局，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
首先可以打開朋友圈觀察不同圖片數(shù)量的幾種布局,也可參考下圖示例；
可以發(fā)現(xiàn)除1張圖片，4張圖片特殊外，其他數(shù)量圖片均使用一行三列的方式排列；
假設有如下HTML代碼，這里imgList是一個圖片地址數(shù)組；
<ul>
<li v-for="(item, index) in imgList" :key=index >
<img :src="item">
</li>
</ul>
1、首先我們使用flex實現(xiàn)正常的三列布局:
設置為換行，每個元素占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選擇器判斷為一張圖片時，改變圖片大小即可;
選擇器邏輯：元素為 倒數(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%;
}
再次之前需對第三個元素恢復間隔，或同朋友圈類似，四張照片是不顯示間隔，如有需求也可設置其他屬性，如下：（此屬性需在上一條屬性之前）
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)朋友圈照片排列布局的文章就介紹到這了,更多相關css 圖片排列布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
CSS實現(xiàn)動態(tài)圖片的九宮格布局的實例代碼
這篇文章主要介紹了CSS實現(xiàn)動態(tài)圖片的九宮格布局的實例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-03css3 圖片圓形顯示 如何CSS將正方形圖片顯示為圓形圖片布局
這篇文章主要為大家介紹了正方形圖片使用CSS如何實現(xiàn)成圓形布局，不使用PS軟件處理，直接使用DIV CSS布局如何實現(xiàn)圖片圓形化，具體實現(xiàn)過程請看下文2014-10-10- 這篇文章主要為大家介紹了在DIV+CSS布局的頁面里，讓布局、背景圖片、文字內容居中的方法，從布局內容到頁面里文章文字居中都是非常重要的，而css來設置居中也是非常簡單的2014-10-09
- 在文章中難免會出現(xiàn)表情，在在這種情況下如何以比較合理的方式顯示文字與表情呢？其實很簡單，通過簡單幾行CSS樣式便可實現(xiàn)，感興趣的朋友可以了解下2013-09-06
- input框中有圖片的情況下如何使用css實現(xiàn)，為了美觀、形象，一般都會在用戶名，密碼等輸入框中加一個圖片，其實很簡單，具體的實現(xiàn)如下，感興趣的朋友可以參考下2013-08-01
- 這只是一個布局實例，學習CSS有用處，因為這個用來修飾圖片的邊框做的不錯，主要是想了解如何用CSS實現(xiàn)這種布局，在相對、絕對定位，或者是在多種瀏覽器不失真、不2009-11-04
