|
之前做了个仿朋友圈的小程序，现在Vue又用到1-9张图片布局，干脆重做一个简单好看的，
一个容器放一张图片，给容器动态加上样式。
参考了其他博主的样式代码，代码重复的也比较多，可以再完善，能力有限只能做成这样的了
    
//html
//总容器
//单个图片容器，setClass方法选择类名
![]() //图片
//script
//methods
setClass(length,index){//传入图片数量，和渲染的第几张图片
if (length==1) {//1张图片时
return 'player-w1'
}
if (length==2 ||length==4) {//2或4张图片时
return 'player-w2'
}
if (length==3) {// 3张图片时
if (index==1) {return 'player-w1-1'}else{return 'player-w2'}
//返回第一张图片的类名和其他类名
}
if (length==5 ||length==8) {// 5或8张图片时
if (index==1 ||index==2) {return 'player-w2'}else{return 'player-w3'}
//第一张和第二张图片用相同的样式,
}
if (length==6 ||length==9) {// 6或9张图片时
return 'player-w3'
}
if (length==7) {// 7张图片时
if (index==1) {return 'player-w1-1'}else{return 'player-w3'}
}
}
//css
//改自博主
.player {
width: 100%;
max-height: 65vh;//设置最大高度，
display: flex;
flex-wrap: wrap;//允许换行
img{
width: 100%;
height: 100%;
object-fit: cover;// 保持原有尺寸比例。但部分内容可能被剪切。
}
}
.player-w1 {//一张图片时
margin: 0 auto;
box-sizing: border-box;
}
.player-w2 {2或4张图片时，5或8张图片的前两张图片时
width: 50%;
height:25vh;
padding: 2px;
box-sizing: border-box;
}
.player-w1-1 {3或7张图片的第一张图片时
width: 100%;
max-height: 28vh;
padding-bottom: 2px;
box-sizing: border-box;
img{
object-fit: contain;// 保持原有尺寸比例。内容被缩放。
}
}
//6或9张图片时，5张图片的第3-5张图片时，7张图片的第2-7张图片时，8张图片的第3-8张图片时
.player-w3 {
width: 33%;
height: 18vh;
padding: 2px;
box-sizing: border-box;
}
|