在Vue3中，JS实现横向(等宽不等高)瀑布流布局

1.准备好图片结构

template部分：

<div class="pic_list" v-infinite-scroll="load" :infinite-scroll-immediate="false">
	  
      <div v-for="item in picList" :key="item.picId" class="pic_item" :style="{
        width: item.newWidth + 'px',
        height: item.newHeight + 'px',
        left: item.left + 'px',
        top: item.top + 'px'
      }">
        <el-image v-if="item.img" :src="item.img"  />
      div>
    div>

css部分

.pic_list {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    height: 1000px;

    .pic_item {
      position: absolute;
      cursor: pointer;

      .el-image {
        display: block;
        width: 100%;
        height: 100%;

        :deep(.el-image__inner) {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 12px;
        }
      }
    }
  }

2.纵向瀑布流函数

在util文件夹中新建一个waterfall.js的瀑布流函数文件，添加如下代码：

// 等宽度瀑布流布局 opt是一个配置对象
export const horizontalWaterfall = (opt) => {
  let el = opt.el;
  let column = opt.column;
  let gap = opt.gap;
  let width = 1200; // 图片容器的宽度
  let newWidth = (width - (column - 1) * gap) / column; // 计算出每个图片固定的宽度
  let heightArr = []; // 图片高度的数组
  let item = null;
  let minIdx = -1; // 图片最小高度的索引
  for (let i = 0; i < el.length; i++) {
    item = el[i];
    item.newWidth = newWidth;
    if (item.picHeight === null) item.picHeight = 200;
    if (item.picWidth === null) item.picWidth = 300;
    if (i < column) {
      item.top = 0;
      // 按照宽度比例缩放后的高度值：item.picHeight / (item.picWidth / newWidth)
      item.newHeight = Math.floor(item.picHeight / (item.picWidth / newWidth));
      item.left = i * (newWidth + gap);
      heightArr[i] = item.newHeight;
    } else {
      item.newHeight = Math.floor(item.picHeight / (item.picWidth / newWidth));
      minIdx = getMinHeightIndex(heightArr);
      item.left = el[minIdx].left;
      item.top = heightArr[minIdx] + gap;
      // 更新当前heightArr中的最低高度 = 之前的最低高度 + 当前的高度 + 间隙
      heightArr[minIdx] = heightArr[minIdx] + item.newHeight + gap;
    }
  }
};

// 获取图片高度最小的索引值
const getMinHeightIndex = (arr) => {
  return arr.indexOf(Math.min(...arr));
};

3.在vue文件中使用该函数

    import { horizontalWaterfall } from '../utils/waterfall';
    // 获取图片数据
    const getPicList = async () => {
      const res = await picIndexPicList(state.pageNum, state.pageSize);
      if (res.code && res.code === 200) {
        state.picList = [...state.picList, ...res.rows];
        state.total = res.total;
        // 调用瀑布流函数，实现瀑布流效果
        horizontalWaterfall({
          el: state.picList, // 要改变的数据
          column: 4, // 把图片分成几列
          gap: 10, // 图片之间的间隙
        });
      }
    };

4.最终效果图