vue木桶布局（图片自适应浏览器宽度排列）的实现方法

先上效果：

基本实现思路：

1. 监听浏览器的resize事件，实时获取到浏览器宽度
2. 设置一个图片的基础高度(例如300px)，以此为基准把图片都缩放到这个高度
3. 把图片依次加入同一行，如果宽度超过浏览器宽度了，开始下一步处理
4. 把最后一张导致超出宽度的图片弹出，计算该行已有图片的宽度
5. 根据面积相等原则，计算新的高度（新的高度 = 浏览器宽度 * 基础高度 / 总的宽度 ）
6. 根据新高度和图片原始比例，计算出图片新的宽高
7. 最后一行不足以铺满屏幕，进行特殊处理

虽然步骤说起来挺简单，但其实实现起来还是有不少坑的，比如说图片计算新的宽高时记得把边距也算上，最后一行因为不满一行需要特殊处理，图片的比例计算等等

完整的代码如下，已加有注释，可直接当一个组件使用，传入的参数格式如下

imgs:[
    {
    id: 1, url:'图片地址', width: '图片宽度', height: '图片高度' }
]

<template>
  <div v-if="newList.length>0">
      <div class="row" v-for="(row,index) in newList" :key="index" style="min-width:1100px;">
           <div class="img-box" v-for="img in row" :key="img.id" :style="{'width':img.width,'height':img.height}">
          	  <a :href="'detail/'+img.id" target="_blank">
              <el-image :src="img.url" alt="图片加载失败" :style="{'width':img.width,'height':img.height}" lazy></el-image></el-image>
          </a>
        </div>
      </div>
  </div>
</template>

<script>
export default {
   
  props: [