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

CSS zum Erzielen eines Beispielcodes für eine Bildlaufleiste

Auf manchen Websites sieht man oft Bilder, die ko...

CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)

Vorwort Ich habe vor Kurzem :first-child in einem...

Detaillierte Erklärung zur Verwendung der ziehbaren Textfeldkomponente von Vue.js

Inhaltsverzeichnis Registrieren von Komponenten K...

Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.

Wenn Menschen zu lange untätig waren, denken sie,...

Lösen Sie das Problem der inkonsistenten MySQL-Speicherzeit

Nachdem die Systemzeit mit Java ermittelt und in ...

MySQL implementiert Beispielcode, um doppelte Hinzufügungen beim Hinzufügen eines Einkaufswagens zu verhindern

Vorwort Vor kurzem habe ich aus beruflichen Gründ...

Das Front-End muss wissen, wie Bilder verzögert geladen werden (drei Methoden)

Inhaltsverzeichnis 1. Was ist Lazy Loading? 2. Im...

Was ist SSH? Wie benutzt man? Was sind die Missverständnisse?

Inhaltsverzeichnis Vorwort Was ist SSH? Wofür wir...

Codebeispiele für die Dekomprimierung, Änderung und andere Betriebsmethoden von Linux-Deb-Paketen

Aus verschiedenen Gründen müssen Sie manchmal den...

Detaillierte Installationsanleitung für das Cloud-Server-Pagoda-Panel

Inhaltsverzeichnis 0x01. Installieren Sie das Pag...

Erläuterung zum Lastenausgleich und Reverseproxy von Nginx

Inhaltsverzeichnis Lastenausgleich Klassifizierun...

Vollständiger Code von Vue + iView zur Realisierung der Excel-Upload-Funktion

1. HTML-Teil <Col span="2">Datei ...

Detaillierte Erklärung des MySQL-Datenbank-LIKE-Operators in Python

Der LIKE-Operator wird in der WHERE-Klausel verwe...

Eine kurze Analyse der Beispiele und Unterschiede bei der Verwendung von nohup und screen zum Ausführen von Hintergrundaufgaben in Linux

Die Verwendung eines SSH-Terminals (z. B. Putty, ...

Detaillierte Erklärung zu sinnvollen Einstellungen des MySQL sql_mode

Sinnvolle Einstellung des MySQL sql_mode sql_mode...