js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)

js, um ein Wasserfall-Flusslayout zu erreichen (unendliches Laden)

In diesem Artikelbeispiel wird der spezifische Code von js zur Implementierung des Wasserfall-Flow-Layouts zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

1. Implementieren Sie Ideen für das Wasserfall-Flow-Layout

Nach der Datenaufbereitung

. Scroll-Ereignisse binden
. Bestimmen Sie, ob die Seite das Ende erreicht hat (Scrolldistanz + Höhe des Bereichs == Oberseite des letzten Elements)
 . Neue Daten laden und neue Seite rendern
.Führen Sie den Wasserfalleffekt erneut aus

2. Code (kann direkt nach Änderung des Bildpfades ausgeführt werden)

<!DOCTYPE html>
<html>
<Kopf>
 <meta charset="UTF-8">
 <title>Dokument</title>
 <Stil>
 .cont{margin: 0 auto;background: #ccc;position: relative;}
 .cont::after{Inhalt: "";Anzeige: Block;Löschen: beides;}

 .box{float: links;padding: 6px;}

 .imgbox{Rand: durchgehend 1px schwarz;Padding: 6px;Randradius: 6px;}
 
 .imgbox img{width: 200px;display: block;}
 </Stil>
 <script src="data/data.js"></script>
 <Skript>
 // W1. Daten vorbereiten // W2. Scroll-Ereignisse binden // W3. Bestimmen, ob die Seite das Ende erreicht hat (Scrolldistanz + Höhe des Scrollbereichs == Oberseite des letzten Elements)
  // W4. Neue Daten laden und neue Seite rendern // W5. Wasserfalleffekt erneut ausführen onload = function(){
  neuer Wasserfall;
 }
 Klasse Wasserfall{
  Konstruktor(){
  // 1. Elemente auswählen this.box = document.querySelectorAll(".box");
  dies.cont = document.querySelector(".cont");
  this.clientH = Dokument.documentElement.clientHeight;
  dies.heightArr = [];
  // 2. Vervollständigen Sie das Layout this.init();
  dies.addEvent();
  }
  Ereignis hinzufügen(){
  var das = dies;
  onscroll = Funktion(){
   var scrollT = Dokument.documentElement.scrollTop;
   wenn (that.clientH + scrollT > that.scrollH - 300) {
   das.render()
   }
  }
  }
  machen(){
  für(var i=0;i<data.length;i++){
   var img = document.createElement("img")
   img.src = Daten[i].src;
   var imgbox = document.createElement("div")
   imgbox.className = "imgbox";
   var box = document.createElement("div")
   box.Klassenname = "Box";
   imgbox.appendChild(img);
   box.anhängenUntergeordnetesElement(imgbox);
   dies.cont.appendChild(box);
  }
  // Alles initialisieren this.box = document.querySelectorAll(".box");
  dies.heightArr = [];
  // Rendern Sie die Wasserfallstruktur erneut this.firstLine();
  diese.andereZeile();
  }
  init(){
  // Berechnen Sie die maximale Anzahl von Zellen, die in eine Zeile passen, und berechnen Sie dann die maximale Breite. this.clientW = document.documentElement.clientWidth;
  diese.boxW = diese.box[0].offsetWidth;
  this.maxNum = parseInt(this.clientW / this.boxW)
  diese.cont.style.width = diese.boxW * diese.maxNum + "px";

  // 3. Unterscheide die erste Zeile this.firstLine()
  // 4. Andere Zeilen unterscheiden this.otherLine();
  }
  ersteZeile(){
  // 5. Höhe aller Elemente ermitteln und speichern für (var i=0;i<this.maxNum;i++){
   dies.heightArr.push(diese.box[i].offsetHeight);
  }
  }
  andereZeile(){
  für(var i=this.maxNum;i<this.box.length;i++){
   // 6. Alle Höhen der ersten Reihe abrufen // console.log(this.heightArr)
   // Minimalwert und Index des Minimalwerts berechnen // var min = getMin(this.heightArr);
   // var min = Math.min.apply(null,this.heightArr);
   var min = Math.min(...diese.höheArr);
   var minIndex = this.heightArr.indexOf(min);
   // konsole.log(minIndex);
   // 7. Legen Sie die Positionierung des Elements fest this.box[i].style.position = "absolute";
   // 8. Legen Sie die Ober- und die linke Seite des Elements fest
   diese.box[i].style.top = min + "px";
   diese.box[i].style.left = minIndex * diese.boxW + "px";
   // 9. Ändern Sie den Mindestwert this.heightArr[minIndex] += this.box[i].offsetHeight;
  }
  this.scrollH = Dokument.documentElement.scrollHeight;
  }
 }
 Funktion getMin(arr){
  // Fangen Sie zuerst das Array ab (für eine tiefe Kopie)
  // Dann sortiere das abgefangene neue Array // Suche die 0. Position // Gib return arr.slice(0).sort((a,b)=>ab)[0]; ein.
 }
 
 </Skript>
</Kopf>
<Text>
 <div Klasse="Fortsetzung">
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/4.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/2.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/3.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/5.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/1.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/6.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/7.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/8.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/9.jpg" alt="">
  </div>
 </div>
 <div Klasse="Box">
  <div Klasse="imgbox">
  <img src="../imgs/10.jpg" alt="">
  </div>
 </div>
 </div>
</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • JS realisiert den Effekt des Bildwasserfallflusses
  • Verwenden von js, um einen Wasserfalleffekt zu erzielen
  • js realisiert das dynamische Laden von Daten durch Wasserfallfluss
  • So verwenden Sie JS zum Implementieren des Wasserfalllayouts von Webseiten
  • 3 Möglichkeiten zum Implementieren eines Wasserfalllayouts mit JavaScript
  • Haben Sie gelernt, wie man einen JavaScript-Wasserfallfluss implementiert?

<<:  So verwenden Sie Dockerfile zum Erstellen von Images in Docker

>>:  Zusammenfassung der in MySQL häufig verwendeten SQL-Anweisungen zum Erstellen von Tabellen, Hinzufügen von Feldern, Ändern von Feldern und Hinzufügen von Indizes

Artikel empfehlen

Zwei Möglichkeiten zum Erstellen eines privaten GitLab mit Docker

Die erste Methode: Docker-Installation 1. Ziehen ...

Der Lösungsdatensatz für Vue, der das Element beim ersten Mal nicht abrufen konnte

Vorwort Die Lösung für das Problem, dass Elemente...

Linux Yum-Paketverwaltungsmethode

Einführung yum (Yellow dog Updater, Modified) ist...

Installations-Tutorial zur komprimierten Version von MySQL 8.0.11

In diesem Artikel finden Sie das Installations-Tu...

Allgemeine Textverarbeitungsbefehle unter Linux und Vim-Texteditor

Lassen Sie uns heute einige gängige Textverarbeit...

Toolkit: Ein leistungsfähigeres Front-End-Framework als Bootstrap

Hinweis: Die derzeit beliebtesten Front-End-Frame...

MySQLs konzeptionelles Verständnis verschiedener Sperren

Optimistisches Sperren Optimistisches Sperren wir...

Was macht die MySQL-Datenbank?

MySQL ist ein relationales Datenbankverwaltungssy...

Ubuntu 18.0.4 installiert MySQL und behebt FEHLER 1698 (28000): Zugriff für Benutzer ''root''@''localhost'' verweigert

Vorwort Ich habe vor Kurzem Linux gelernt und dan...

Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue

1. Dynamische Komponenten <!DOCTYPE html> &...

React Native realisiert den Auf- und Ab-Pull-Effekt der Überwachungsgeste

React Native implementiert die Überwachungsgeste ...

Analyse der neuen Funktionen von MySQL 8.0 - Transaktionales Datenwörterbuch und Atomic DDL

Vorwort Das Transaktionsdatenwörterbuch und das a...

Ubuntu erstellt Mysql+Keepalived-Hochverfügbarkeitsimplementierung (Dual-Active Hot Standby)

Mysql5.5 Dual-Maschine-Hot-Standby Durchführung I...

Wird der veraltete Docker durch Podman ersetzt?

Das Kubernetes-Team hat vor Kurzem angekündigt, d...

Das Festlegen der Z-Index-Eigenschaft für die Flash-Overlay-Popup-Ebene im Webdesign funktioniert nicht

Standardmäßig wird Flash immer auf der obersten Eb...