jsはウォーターフォールフローのボトムアウトによるデータの動的ロードを実現します

// onScrollEvent スクロールバーイベント <div class="box" ref="box" @mousewheel="onScrollEvent">
    //各ブロックの内容は
      <div class="boxItemStyle" v-for="(userTag, i) in dataSource" :key="i" ref="boxItemStyle">
        <a-tag class="moreStyle" @click="more(userTag.primaryParam)"> もっと見る></a-tag>
        <div v-for="item in userTag.userTag" :key="item.code">
          <p>
            {{item.name}}:
            {{ アイテム.値 }}
          </p>
        </div>
      </div>
      //各ブロックの内容終了
</div>

滝() {
  // 余白の幅を減算する var pageWidth = this.$refs.box.offsetWidth - 200
      var columns = 4; // 4 列の行を定義します var itemWidth = parseInt(pageWidth / columns);
      var arr = [];
      var ノード = document.getElementsByClassName("boxItemStyle")
      タイムアウトを設定する(() => {
        //var node1 = Array.from(ノード)
       // var node2 = Array.prototype.slice.call(nodes)
        (var i = 0; i < nodes.length; i++) の場合 {
          ノード[i].style.width = アイテム幅 + "px"
          if (i < 列) {
            ノード[i].style.width = アイテム幅 + "px"
            ノード[i].style.left = アイテム幅 * i + i * 50 + "px"
            ノード[i].style.top = 0
            arr.push(ノード[i].offsetHeight);
          } それ以外 {
            // 配列内の最小の高さとそのインデックスを見つけます var minHeight = arr[0];
            var インデックス = 0;
            (var j = 0; j < arr.length; j++) の場合 {
              （最小高さ＞arr[j]）の場合{
                最小高さ = arr[j];
                インデックス = j;
              }
            }
            ノード[i].style.top = arr[インデックス] + 30 + "px"、
              ノード[i].style.left = ノード[index].offsetLeft + 'px';
            // 最小列の高さを変更します // 最小列の高さ = 現在の高さ + 接合された列の高さ arr[index] = arr[index] + nodes[i].offsetHeight + 30; // 距離を 30 に設定します }
        }
      }, 1000)
    },

スクロールイベント(){
      もし （
        this.isScroll &&
        this.$refs.box.scrollHeight - this.$refs.box.scrollTop - this.$refs.box.clientHeight <= 0
      ）{
        this.loading = true
        if (this.ipagination.current == 1) {
          this.ipagination.current += 1
        }
        パラメータを {} とします
        param['pageNo'] = this.ipagination.current
        param['pageSize'] = this.ipagination.pageSize
        param['portraitId'] = this.portraitId
        postAction(this.url.list, { ...param }).then((res) => {
          this.loading = false
          （res.成功）の場合{
            this.isScroll = res.records
            this.dataSource = this.dataSource.concat(res.result.records || res.result)
            this.waterFall();
          }
        })
        this.ipagination.current++
      }
    },