结合vue实现移动端页面的瀑布流布局

参考博客：浅谈瀑布流原理及Vue实现
结合自己项目的需求进行修改

基本原理：多行等宽不等高元素排列。第一排图片的顶部会处于同一个高度，依次排列在顶端，第二行以及之后的行则利用定位在最短的一列下面进行排列

// 封装了WaterFallFlow.vue子组件
<template>
  <div class="waterfall_container">
    <div
      v-for="(item, index) in waterfallList"
      :key="index"
      class="waterfall_item"
      :style="{ top: item.top + 'px', left: item.left + 'px', width: imgWidth + 'px', height: item.itemHeight }"
    >
      <div class="coverImg">
        <Cover :src="item.src" alt="" :height="item.imgHeightPercent + '%'"></Cover>
      </div>
      <div class="content">
        <div class="title line2">528㎡让人惊艳的混搭魅力</div>
        <div class="info flex flex-between flex-middle">
          <div class="designer flex-item-3">
            <img src="@/assets/images/灵感详情.png" alt="" />
            <span class="name">FFSTUDsssssssssssIO</span>
          </div>
          <div class="watcher flex-item-2">
            <img src="@/assets/images/icon/列表-浏览量.png" alt="" />
            <span> 3.5k</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cover from "@/components/Cover";
export default {
  components: {
    Cover,
  },
  props: {
  // 父组件传值给子组件
    list: {
      type: Array,
      default: function() {
        return [
        // 在js中存放静态文件链接的时候要用require，不然不会显示
          require("@/assets/images/灵感列表2.png"),
          require("@/assets/images/产品目录3.png"),
          require("@/assets/images/灵感详情.png"),
          require("@/assets/images/灵感列表1.png"),
          require("@/assets/images/产品目录2.png"),
          require("@/assets/images/产品目录1.png"),
          require("@/assets/images/国际趋势2品牌1.png"),
          require("@/assets/images/国际趋势2品牌2.png"),
          require("@/assets/images/国际趋势2品牌3.png"),
          require("@/assets/images/国际趋势1品牌3.png"),
          require("@/assets/images/国际趋势1品牌2.png"),
          require("@/assets/images/设计师列表-作品3.png"),
          require("@/assets/images/设计师列表-作品2.png"),
        ];
      },
    },
  },
  data() {
    return {
      waterfallList: [],
      imgWidth: 0, // 图片宽度
      contentHeight: 100, // 内容高度
      waterfallCol: 2, // 瀑布流列数
      itemRight: 0.5, // 图片右边距(以rem为单位)
      itemBottom: 1, // 图片下边距(以rem为单位)
      waterfallDeviationHeight: [], // 瀑布流高度偏移量
    };
  },
  mounted() {
    // 根元素像素
    const rootElePixel = parseInt(window.getComputedStyle(document.querySelector("html"), null).fontSize);
    this.itemRight *= rootElePixel;
    this.itemBottom *= rootElePixel;
    this.calculationValue();
  },
  methods: {
    // 计算每项的宽度(即图片/内容宽度)
    calculationValue() {
      const containerWidth = document.querySelector(".waterfall_container").offsetWidth;
      this.imgWidth = (containerWidth / this.waterfallCol) - this.itemRight;
      // 初始化偏移高度数组,该数组用于存放每一列的高度
      this.waterfallDeviationHeight = new Array(this.waterfallCol);
      for (let i = 0; i < this.waterfallDeviationHeight.length; i++) {
        this.waterfallDeviationHeight[i] = 0;
      }
      this.imgPreloading();
    },
    // 图片预加载
    imgPreloading() {
      for (let i = 0; i < this.list.length; i++) {
        const aImg = new Image();
        aImg.src = this.list[i];
        // 注意：图片加载完成的顺序不一样的，所以在页面显示图片的顺序每次都可能不一样
        aImg.onload = aImg.onerror = (e) => {
          const itemData = {};
          // 图片高度按比例缩放
          const imgHeight = (this.imgWidth / aImg.width) * aImg.height;
          // 获取图片高度比
          itemData.imgHeightPercent = (imgHeight / this.imgWidth) * 100;
          // 整体高度 = 图片高度 + 内容高度
          itemData.height = imgHeight + this.contentHeight;
          itemData.src = this.list[i];
          // 将每一项都push到一个列表中
          this.waterfallList.push(itemData);
          // 进行瀑布流布局
          this.waterfallFlowLayout(itemData);
        };
      }
    },
    // 瀑布流布局
    waterfallFlowLayout(itemData) {
      const shortestIndex = this.getShortestCol();
      itemData.top = this.waterfallDeviationHeight[shortestIndex];
      itemData.left = shortestIndex * (this.itemRight + this.imgWidth);
      this.waterfallDeviationHeight[shortestIndex] += itemData.height + this.itemBottom;
    },
    /**
     * 找到最短的列并返回索引
     * @returns {number} 索引
     */
    getShortestCol() {
      const shortest = Math.min.apply(null, this.waterfallDeviationHeight);
      return this.waterfallDeviationHeight.indexOf(shortest);
    },
  },
};
</script>

<style lang="less" scoped>
.waterfall_container {
  width: 100%;
  height: 100%;
  position: relative;
  .waterfall_item {
    float: left;
    position: absolute;
    // 底边阴影
    box-shadow: 0px 0.2rem 0.1rem #f7f8fa;
    .content {
      width: 100%;
      padding: 0.4rem;
      .title {
        font-size: 0.8rem;
      }
      .info {
        margin: 0.4rem 0;
        font-size: 0.5rem;
        color: #bbb;
        .designer {
          margin-right: 0.3rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          img {
            border-radius: 50%;
            width: 1.6rem;
            height: 1.6rem;
          }
        }
        .watcher {
          img {
            width: 1rem;
            height: 1rem;
          }
        }
      }
    }
  }
  img {
    vertical-align: middle;
  }
}
</style>

// 封面图Cover.vue子组件
<template>
  <div>
    <div class="cover-img">
      <img :src="src" :alt="alt" />
    </div>
    <!-- 控制封面图高度 -->
    <div class="holder" :style="'padding-bottom:' + height"></div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    alt: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
.cover-img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-position: 50%;
  background-size: cover;
}
.cover-img img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
}
.holder {
  width: 100%;
  position: relative;
  padding-bottom: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

效果图：