js realisiert das dynamische Laden von Daten durch Wasserfallfluss

// onScrollEvent Bildlaufleistenereignis <div class="box" ref="box" @mousewheel="onScrollEvent">
    //Der Inhalt jedes Blocks beginnt
      <div Klasse="boxItemStyle" v-for="(Benutzertag, i) in Datenquelle" :key="i" ref="boxItemStyle">
        <a-tag class="moreStyle" @click="more(userTag.primaryParam)"> Mehr></a-tag>
        <div v-for="Element in Benutzertag.Benutzertag" :key="Element.code">
          <p>
            {{ item.name }}:
            {{ Artikel.Wert }}
          </p>
        </div>
      </div>
      //Inhalte in jedem Block enden
</div>

Wasserfall() {
  // Subtrahieren Sie die Breite des Randes var pageWidth = this.$refs.box.offsetWidth - 200
      var columns = 4; //Definiere eine Zeile mit 4 Spalten var itemWidth = parseInt(pageWidth / columns);
      var arr = [];
      var Knoten = document.getElementsByClassName("boxItemStyle")
      setzeTimeout(() => {
        //var node1 = Array.from(Knoten)
       // var node2 = Array.prototype.slice.call(Knoten)
        für (var i = 0; i < Knoten.Länge; i++) {
          Knoten[i].style.width = Elementbreite + "px"
          if (i < Spalten) {
            Knoten[i].style.width = Elementbreite + "px"
            Knoten[i].style.left = Artikelbreite * i + i * 50 + "px"
            Knoten[i].style.top = 0
            arr.push(Knoten[i].offsetHeight);
          } anders {
            // Finde die minimale Höhe im Array und seinen Index var minHeight = arr[0];
            Var-Index = 0;
            für (var j = 0; j < arr.length; j++) {
              wenn (minHeight > arr[j]) {
                minHöhe = arr[j];
                Index = j;
              }
            }
            Knoten[i].style.top = arr[index] + 30 + "px",
              Knoten[i].style.left = Knoten[index].offsetLeft + 'px';
            // Höhe der Mindestspalte ändern // Höhe der Mindestspalte = aktuelle Höhe + Höhe der gespleißten Spalte arr[index] = arr[index] + nodes[i].offsetHeight + 30; // Abstand auf 30 einstellen }
        }
      }, 1000)
    },

beiScrollEvent () {
      Wenn (
        dies.isScroll &&
        dies.$refs.box.scrollHeight - dies.$refs.box.scrollTop - dies.$refs.box.clientHeight <= 0
      ) {
        dies.laden = wahr
        wenn (this.ipagination.current == 1) {
          dies.ipagination.current += 1
        }
        let param = {}
        param['Seitennr.'] = diese.ipagination.aktuell
        param['Seitengröße'] = this.ipagination.Seitengröße
        param['portraitId'] = diese.portraitId
        postAction(diese.url.list, { ...param }).then((res) => {
          dies.laden = falsch
          wenn (res.erfolg) {
            this.isScroll = res.Datensätze
            diese.Datenquelle = diese.Datenquelle.concat(res.Ergebnis.Datensätze || res.Ergebnis)
            dies.waterFall();
          }
        })
        dies.ipagination.current++
      }
    },