Vue は無限ロードウォーターフォールフローを実装します

<テンプレート>
  <div class="waterfall wf-wrap" ref="waterfall" @scroll="onScroll">
    <ul>
      <トランジショングループ名="リスト" タグ="li">
        <li
          v-for="waterfallList 内の (item,index)"
          :key="インデックス"
          クラス="wf-item"
          :style="{top:item.top+ 'px',left:item.left+'px', width:item.width+'px', height:item.height + 'px'}"
        >
          <img :src="item.src" />
        </li>
      </トランジショングループ>
    </ul>
  </div>
</テンプレート>
<スクリプト>
"@/api/demo" から { getList } をインポートします。

エクスポートデフォルト{
  名前:「滝」
  データ（） {
    戻る {
      滝リスト: [],

      滝Col: 5,
      列幅: 236,
      マージン右: 10,
      マージン下: 10,
      高さ: [],

      リストクエリ: {
        ページ: 1,
        制限: 5,
        並べ替え: "+id"
      },
      読み込み中: false、
      表示: 真
    };
  },
  マウント() {
    これを初期化します。
  },
  メソッド: {
    初期化() {
      // 初期化されると、各列の高さは 0 になります
      this.colHeights = 新しい配列(this.waterfallCol);
      (i = 0 とします; i < this.colHeights.length; i++) {
        this.colHeights[i] = 0;
      }
      this.colWidth =
        (this.$refs.waterfall.clientWidth -
          (this.waterfallCol - 1) * this.marginRight) /
        this.waterfallCol;
      this.loadImgs();
    },

    画像を読み込む() {
      this.loading = true;
      // API からデータを取得する getList(this.listQuery).then(res => {
        画像を res.data.items とします。
        promiseAll = [] とします。
          画像 = [],
          合計 = 画像の長さ;

        (i = 0 とします; i < 合計; i++) {
          promiseAll[i] = 新しいPromise(resolve => {
            imgs[i] = 新しい画像();
            画像URIをコピーする
            imgs[i].onload = () => {
              imgData = {} とします。
              imgData.height = (imgs[i].height * this.colWidth) / imgs[i].width;
              imgData.width = this.colWidth;
              画像URIをコピーします。
              this.waterfallList.push(画像データ);
              this.rankImgs(画像データ);
              imgs[i]を解決します。
            };
          });
        }
        Promise.all(promiseAll).then(() => {
          this.loading = false;
          これをさらに読み込む();
        });
      });
    },

    ロードモア() {
      もし （
        this.$refs.waterfall.clientHeight + this.$refs.waterfall.scrollTop >
          this.filterMin().minHeight &&
        this.loading == false
      ）{
        this.loading = true;
        タイムアウトを設定する(() => {
          this.loadImgs();
        }, 200);
      }
    },

    ランク画像(画像データ) {
      min = this.filterMin() とします。
      imgData.top = min.minHeight;
      imgData.left = min.minIndex * (this.colWidth + this.marginRight);

      this.colHeights[min.minIndex] += imgData.height + this.marginBottom;
    },

    フィルター最小値() {
      minHeight = Math.min.apply(null, this.colHeights); とします。
      戻る {
        最小高さ: 最小高さ、
        最小インデックス: this.colHeights.indexOf(minHeight)
      };
    },

    スクロール() {
      これをさらに読み込む();
    }
  }
};
</スクリプト>

<style lang="scss" スコープ>
ul li {
  リストスタイル: なし;
}

.wf-wrap {
  位置: 相対的;
  幅: 100%;
  高さ: 100%;
  オーバーフロー: スクロール;
}
.wf-item {
  位置: 絶対;
}
.wf-item画像{
  幅: 100%;
  高さ: 100%;
}
.list-enter-active、
.list-leave-active {
  遷移: すべて 1;
}
.list-enter、.list-leave-to
/* バージョン 2.1.8 未満では .list-leave-active */ {
  不透明度: 0;
  変換: translateY(30px);
}
</スタイル>