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

Detaillierte Erläuterung der bidirektionalen Bindung von Vue

Inhaltsverzeichnis 1. Zwei-Wege-Bindung 2. Wird d...

Vollständige Schritte zum Erstellen eines Passwortgenerators mit Node.js

Inhaltsverzeichnis 1. Vorbereitung 2. Befehlszeil...

Methode zur Realisierung einer automatisierten Bereitstellung basierend auf Docker + Jenkins

Verwenden Sie Code Cloud, um ein Git-Code-Speiche...

So verwendet MySQL Transaktionen

Grundlagen Eine Transaktion ist eine atomare Oper...

Ändern Sie die Standardfarbe des Platzhaltertexts im Eingabefeld - Methode „webkit-input-placeholder“

HTML5 fügt ein natives Platzhalterattribut für di...

Vorschau auf die neuen Funktionen von XHTML 2.0

<br />Bevor Browser die nächste Generation v...

Gründe und Lösungen für das Nicht-Wirksamwerden der MySQL-SQL-Modus-Änderung

Inhaltsverzeichnis Vorwort Szenariosimulation Zus...

Nachdem Webpack-cli erfolgreich installiert wurde, prüfen Sie den Fehlerfall webpack -v für Details.

Inhaltsverzeichnis Frage 1. Installieren Sie webp...

So installieren Sie Oracle_11g mit Docker

Installieren Sie Oracle_11g mit Docker 1. Ziehen ...

setup+ref+reactive implementiert Vue3-Reaktionsfähigkeit

Das Setup wird zum Schreiben kombinierter APIs ve...

Eine kurze Diskussion über MySQL-Backup und -Wiederherstellung für eine einzelne Tabelle

A. Installation des MySQL-Sicherungstools xtrabac...

Beispiel für das Einfügen eines HTML-Bilds (html add image)

Zum Einfügen von Bildern in HTML sind HTML-Tags f...

14 praktische Erfahrungen zur Reduzierung von SCSS-Code um 50 %

Vorwort Sass ist eine Erweiterung der CSS3-Sprach...

So führen Sie einen Befehl zu einem bestimmten Zeitpunkt in Linux aus

Neulich habe ich rsync verwendet, um eine große D...

Detaillierte Erklärung der CSS-Stil-Kaskadierungsregeln

Der Syntaxstil der CSS-Stilregel ist die Grundein...