Vue implementiert einen Wasserfallfluss mit unendlichem Laden

<Vorlage>
  <div class="Wasserfall wf-wrap" ref="Wasserfall" @scroll="onScroll">
    <ul>
      <transition-group name="list" tag="li">
        <li
          v-for="(Element, Index) in Wasserfallliste"
          :Schlüssel="Index"
          Klasse="wf-item"
          :Stil="{oben:Element.oben+'px',links:Element.links+'px', Breite:Element.breite+'px', Höhe:Element.höhe + 'px'}"
        >
          <img :src="item.src" />
        </li>
      </Übergangsgruppe>
    </ul>
  </div>
</Vorlage>
<Skript>
importiere { getList } von "@/api/demo";

Standard exportieren {
  Name: "Wasserfall",
  Daten() {
    zurückkehren {
      WasserfallListe: [],

      WasserfallCol: 5,
      Spaltenbreite: 236,
      Rand rechts: 10,
      Rand unten: 10,
      Spaltenhöhen: [],

      Listenabfrage: {
        Seite: 1,
        Grenze: 5,
        Sortieren: "+id"
      },
      wird geladen: falsch,
      zeigen: wahr
    };
  },
  montiert() {
    dies.init();
  },
  Methoden: {
    init() {
      // Bei der Initialisierung beträgt die Höhe jeder Spalte 0
      this.colHeights = neues Array(this.waterfallCol);
      für (lass i = 0; i < this.colHeights.length; i++) {
        this.colHeights[i] = 0;
      }
      this.colWidth =
        (this.$refs.waterfall.clientWidth -
          (diese.WasserfallCol - 1) * diese.MarginRight) /
        dieser.WasserfallCol;
      dies.loadImgs();
    },

    ladeImgs() {
      dies.laden = wahr;
      // Daten von der API abrufen getList(this.listQuery).then(res => {
        lass Bilder = res.data.items;
        lass promiseAll = [],
          Bilder = [],
          Gesamt = Bilder.Länge;

        für (sei i = 0; i < gesamt; i++) {
          promiseAll[i] = neues Versprechen(resolve => {
            imgs[i] = neues Bild();
            imgs[i].src = Bilder[i].Bild_uri;
            imgs[i].onload = () => {
              lass imgData = {};
              imgData.height = (imgs[i].height * this.colWidth) / imgs[i].width;
              imgData.width = diese.colWidth;
              imgData.src = Bilder[i].image_uri;
              dies.waterfallList.push(imgData);
              dies.rankImgs(imgData);
              auflösen (Bilder[i]);
            };
          });
        }
        Versprechen.alles(versprechenAlles).dann(() => {
          dies.laden = falsch;
          dies.loadMore();
        });
      });
    },

    ladeMehr() {
      Wenn (
        dies.$refs.waterfall.clientHeight + dies.$refs.waterfall.scrollTop >
          dies.filterMin().minHeight &&
        dies.wird geladen == false
      ) {
        dies.laden = wahr;
        setzeTimeout(() => {
          dies.loadImgs();
        }, 200);
      }
    },

    rankImgs(imgData) {
      lass min = this.filterMin();
      imgData.top = min.minHeight;
      imgData.left = min.minIndex * (this.colWidth + this.marginRight);

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

    filterMin() {
      let minHeight = Math.min.apply(null, this.colHeights);
      zurückkehren {
        minHöhe: minHöhe,
        minIndex: this.colHeights.indexOf(minHeight)
      };
    },

    beimScrollen() {
      dies.loadMore();
    }
  }
};
</Skript>

<style lang="scss" scoped>
ul li {
  Listenstil: keiner;
}

.wf-wrap {
  Position: relativ;
  Breite: 100 %;
  Höhe: 100%;
  Überlauf: scrollen;
}
.wf-Artikel {
  Position: absolut;
}
.wf-item img {
  Breite: 100 %;
  Höhe: 100%;
}
.list-enter-active,
.Liste-leave-active {
  Übergang: alles 1en;
}
.list-enter, .list-leave-to
/* .list-leave-active für Versionen unter 2.1.8 */ {
  Deckkraft: 0;
  transformieren: übersetzenY(30px);
}
</Stil>