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