CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼
我要評(píng)論前提條件： content="width=750"
<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi,viewport-fit=cover">
效果圖如下：
需求分析
高寬：
1張圖【寬320，高320】[2倍稿尺寸]
2張圖時(shí)【寬332，高332】
3張圖、4張圖、6張圖，7張圖、9張圖時(shí)【寬220，高220】
5張圖、8張圖時(shí)【第4、第5張寬高332】，【其余220】
間距：
2張時(shí)，【最后一張】只有l(wèi)eft方向margin
3張時(shí)，【第2張】左右margin
4張時(shí)，【第2張】和【最后一張】都只有l(wèi)eft方向的margin，【3，4】有top方向的margin
5張時(shí)，【最后一張】只有l(wèi)eft方向margin
6張、7張時(shí)，【第2張、第4張】有左右margin，從【第4張起】top有
8張時(shí)，【第2張、第4張】時(shí)左右margin，從【第4張起】top有，【最后一張】只有l(wèi)eft
9張時(shí)，【第2張、第4張、第8張】有左右margin
圓角10：
1張圖時(shí)【都有】圓角
2張圖時(shí)、3張圖-【第1張左上、左下】，【最后一張右上，右下】
4張圖時(shí)【第1張左上】，【第2張右上】，【第3張左下】，【最后一張右下】
5張圖時(shí)【第1張左上】，【第3張右上】，【第4張左下】，【最后一張右下】
6張圖時(shí)【第1張左上】，【第3張右上】，【第4張左下】，【最后一張右下】
7張圖時(shí)【第1張左上】，【第3張右上】，【第7張左下、右下】
8張圖時(shí)【第1張左上】，【第3張右上】，【第7張左下】，【最后一張右下】
9張圖時(shí)【第1張左上】，【第3張右上】，【第7張左下】，【最后一張右下】
歸納法
大家在中學(xué)的時(shí)候都學(xué)過(guò)數(shù)學(xué)的歸納法，就是一個(gè)命題先求出n=1的時(shí)候成立，然后假設(shè)n=k成立，證明n=k+1也成立，從而證得命題在n=k【k=任意實(shí)數(shù)】的時(shí)候都成立。
代碼
<div class="grid-img-box">
<van-image class='grid-img' v-for="value in data.photo" :key="value" fit="cover" :src="value" />
</div>
.grid-img{
/**
寬高
1. 3n+1且是倒數(shù)第2張時(shí)
2. 3n+1且是最后一張時(shí)
以上兩種情況圖片的寬高均應(yīng)為320；
剩余兩種情況是：
3. 只有一張時(shí)寬高320；
4. 其余的情況和索引寬高都為220；
*/
display: inline-block;
width: 220px;
height: 220px;
&:only-child{
width: 320px;
height: 320px;
}
&:nth-child(3n+1):nth-last-child(2),
&:nth-child(3n+2):last-child{
width: 332px;
height: 332px;
}
/**
間距/布局
*/
&:nth-child(3n+2){
margin: 0 6px;
}
&:nth-child(n+4){
margin-top: 6px;
}
&:first-child{
border-top-left-radius: 10px;
}
&:last-child{
margin-right: 0;
border-bottom-right-radius: 10px;
}
/**
圓角
*/
//左下圓角：最后一行第一個(gè)
&:nth-child(3n+1){
&:last-child,
&:nth-last-child(2),
&:nth-last-child(3){
border-bottom-left-radius: 10px;
}
}
//處理四個(gè)布局
//增大第二個(gè)margin講第三個(gè)擠到下一行
&:nth-child(2):nth-last-child(3){
margin-right: 220px;
}
//重置第二個(gè)圓角
&:nth-child(2):nth-last-child(3){
border-top-right-radius: 10px;
}
//重置第三個(gè)的margin和radius
&:nth-child(3):nth-last-child(2){
margin-top: 6px;
margin-right: 6px;
border-radius: 0 0 0 10px;
}
//重置第4個(gè)的圓角
&:nth-child(4):last-child{
border-radius: 0 0 10px 0;
}
}
總結(jié)
到此這篇關(guān)于CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的文章就介紹到這了,更多相關(guān)css 九宮格布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例代碼
本文只展示自適應(yīng)布局的方案。不展示手動(dòng)指定寬度的那種方案，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例教程感興趣的朋友一起看看吧2022-01-24
