vue木桶布局（图片自适应浏览器宽度排列）的实现方法_vue木桶布局(图片自适应浏览器宽度排列)-CSDN博客

本文链接：https://blog.csdn.net/Quindrich/article/details/124001800

本文介绍如何在Vue中实现木桶布局，使图片根据浏览器宽度自适应排列。通过监听resize事件，设置图片基础高度并缩放，利用面积相等原则计算新高度和宽度，处理最后一行不满的情况，最后提供带注释的完整代码示例。

摘要由CSDN通过智能技术生成

先上效果：

基本实现思路：

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

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

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

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: [