【移动端1-9张图片布局排列】

之前做了个仿朋友圈的小程序，现在Vue又用到1-9张图片布局，干脆重做一个简单好看的，

一个容器放一张图片，给容器动态加上样式。

参考了其他博主的样式代码，代码重复的也比较多，可以再完善，能力有限只能做成这样的了

  

//html
<div class="player" >//总容器
   <div v-for="(item,index) in imgurl" 
        :key="index" 
        :class="setClass(imgurl.length,index+1)">//单个图片容器，setClass方法选择类名
       <img :src="item" alt="">//图片
   </div>
</div>

//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;  
  }