图片不规则排列

1、从后端返回的数组中知道图片的宽、高，如果没有，使用js获取，创建一个盒子，已知盒子的宽度：

<div class="gallery_inner">
  <figure class="imgWebMain" v-for="(item,index) in list" :key="index" :style="{'width':item.realWidth+'px','height':item.realHeight+'px'}">
    <a href=""><img class="imgOne" :src="item.url" alt=""></a>
  </figure>
</div>

2、先确定每张图片宽高比：

getList(){
  for(let i=0;i<this.list.length;i++ ){
    this.list[i].WHparent = this.list[i].width / this.list[i].height
  }
  // 从第一张图片开始去计算
  this.calculate(0)
},

3、设计一个临界值，初始值从第一张开始累加图片的宽高比，当累加宽高比大于临界值时，确定该行的起始图片、最终图片、宽高的总值，传给下个方法，然后重新执行该方法，重新计算下一行的起始图片、最终图片、宽高的总值，最后一行的高度是固定的，执行另一个方法：

// 确定每一行有几张图片
calculate(num){
  // temNum为一行中图片的宽高比的总和
  let temNum = 0
  for(let i=num;i<this.list.length;i++){
    temNum = this.list[i].WHparent + temNum
    // 确定几张图片的宽高比大于某个值时，跳出循环，去确定每张图片的宽、高，并调用自身，确定下一行的图片开始与图片结束位置
    if(temNum > 5.4){
      this.getparent(num,i,temNum)
        if(i+1 < this.list.length){
          this.calculate(i+1)
        }
        return false
        }else if(i==this.list.length-1 && temNum < 5.4){
          console.log(i,'我是最后一行');
          this.lastImg(num,i)
        }
    }
},

4、根据（父盒子的总宽度-该行图片的外边距/内边距）除以该行所有图片的总宽高比得到当前行的高度，再根据每张图片的宽高比算出图片的宽度，该行的最后一张图片宽度是父盒子总宽度减去前面几张图片的宽度得来的，不是根据宽高比计算的：

// 确定每张图片的宽、高
getparent(num,index,val){
  let tem = index - num + 1
  for(let i=num;i<index+1;i++){
    // tem*10是减去每个图片区域的内边距
    this.list[i].realHeight = (1823 - tem*10) / val
    if(i !== index){
      this.list[i].realWidth = this.list[i].realHeight * this.list[i].WHparent
    }else if(i == index){
      // 这是每一行的最后一张图片
      let temH = 0
      for(let j=num;j<index;j++){
        temH = this.list[j].realWidth + 10 + temH
      }
      this.list[i].realWidth = 1823 - 10 - temH
    }
  }
},

5、给最后一行设置一个固定的高度，根据图片宽高比算出每张图片的宽度：

// 最后一行的高度确定为320
lastImg(num,index){
  for(let i=num;i<index+1;i++){
    this.list[i].realHeight = 320
    this.list[i].realWidth = this.list[i].realHeight * this.list[i].WHparent
  }
},

6、效果图：