css實(shí)現(xiàn)朋友圈照片排列布局的代碼

首先可以打開朋友圈觀察不同圖片數(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實(shí)現(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ù)第一個元素 && 第一個元素 時,則可判斷只有一個元素:對其樣式單獨(dú)設(shè)置覆蓋原樣式即可
ul li: nth-last-child(1): first-child{ width: 200px; height: 200px; }
3、對于四張圖片的情況時,圖片需呈 兩行兩列布局:這里就需對此種情況下的第二張圖片添加margin-right實(shí)現(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; }
總結(jié)
到此這篇關(guān)于css實(shí)現(xiàn)朋友圈照片排列布局的文章就介紹到這了,更多相關(guān)css 圖片排列布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
CSS實(shí)現(xiàn)動態(tài)圖片的九宮格布局的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)動態(tài)圖片的九宮格布局的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-04-03css3 圖片圓形顯示 如何CSS將正方形圖片顯示為圓形圖片布局
這篇文章主要為大家介紹了正方形圖片使用CSS如何實(shí)現(xiàn)成圓形布局,不使用PS軟件處理,直接使用DIV CSS布局如何實(shí)現(xiàn)圖片圓形化,具體實(shí)現(xiàn)過程請看下文2014-10-10DIV+CSS中讓布局、背景圖片、文字內(nèi)容居中的方法
這篇文章主要為大家介紹了在DIV+CSS布局的頁面里,讓布局、背景圖片、文字內(nèi)容居中的方法,從布局內(nèi)容到頁面里文章文字居中都是非常重要的,而css來設(shè)置居中也是非常簡單的2014-10-09- 在文章中難免會出現(xiàn)表情,在在這種情況下如何以比較合理的方式顯示文字與表情呢?其實(shí)很簡單,通過簡單幾行CSS樣式便可實(shí)現(xiàn),感興趣的朋友可以了解下2013-09-06
input輸入框中有圖片怎么使用css布局實(shí)現(xiàn)
input框中有圖片的情況下如何使用css實(shí)現(xiàn),為了美觀、形象,一般都會在用戶名,密碼等輸入框中加一個圖片,其實(shí)很簡單,具體的實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-08-01