【sgWaterfall】自定义组件：Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现，支持不同浏览器尺寸宽度下自适应显示列数，文本内容高度自适应。

你挚爱的强哥

已于 2023-10-28 13:28:19 修改

阅读量1.6k JavaScript&TypeScript Vue.js Sg.js框架文章标签：瀑布流 sgWaterfall waterfall waterfallFlow

于 2023-07-13 11:41:16 首次发布

随意拷贝莫问题，但是有一点！请务必备注“你挚爱的强哥出品~么么哒”！

本文链接：https://blog.csdn.net/qq_37860634/article/details/131699053

特性：

自动计算每个图片最佳坐标位置，以达到最新加在图片占据位置尽量让整体更加协调

图片预加载显示占位区域阴影

加载完成后向上浮动动画出现

支持不同浏览器尺寸宽度下自适应显示列数

支持文本内容高度自动撑开（解决了之前文本内容必须固定两行的问题）

可以设置图片封面背景色

Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现

sgWaterfall.vue源码

<template>
  <ul :class="$options.name" :style="waterfallStyle">
    <li v-for="(a, i) in items" :key="i" :style="a.style" :imgLoaded="a.imgLoaded">
      <div class="cover" :style="a.coverStyle">
        <img :src="a.imgURL" @load="a.imgLoaded = true" />
      </div>
      <label :style="a.labelStyle">{
  { a.label }}</label>
    </li>
  </ul>
</template>
<script>
export default {
  name: "sgWaterfall",
  data() {
    return {
      imgLoadedStatus: [],
      items: [],
      waterfallStyle: {},
    };
  },
  props: [
    "data",
    "itemWidth",
    "itemMarginRight",
    "itemMarginBottom",
    "webpageMargin",
    "coverbackgroundColor",
  ],
  watch: {
    data: {
      handler(d) {
        d && (this.items = this.calcAnyPhotosPosition(d));
      },
      deep: true,
      immediate: true,
    },
  },
  destroyed() {
    removeEventListener("resize", this.resize);
  },
  mounted() {
    addEventListener("resize", this.resize);
  },
  methods: {
    resize(e) {
      this.items = this.calcAnyPhotosPosition(this.items);
    },
    // BEGIN 计算图片的坐标位置_________________________________________________________
    // 计算能显示下多少列
    calcColsCount({ itemWidth, webpageMargin, itemMarginRight }) {
      return Math.floor(
        (window.innerWidth - webpageMargin * 2 + itemMarginRight) /
          (itemWidth + itemMarginRight)
      );
    },
    // 计算图片的坐标位置
    calcPhotoScaleWidthHeight(d, { itemWidth, itemText

立即使用