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

onfocus="this.blur()" wird von blinden Webmastern gehasst

Als er über die Seite zur Bedienung der Bildschir...

Lösung für die in Firefox oder IE nicht ermittelte Spannweite

Code kopieren Der Code lautet wie folgt: <html...

Detaillierte Beschreibung der Funktion von meta name="" content="

1. Grammatik: <meta name="Name" conte...

W3C Tutorial (10): W3C XQuery Aktivitäten

XQuery ist eine Sprache zum Extrahieren von Daten...

Detailliertes Tutorial zur Installation von Tomcat8.5 in einer Centos8.2-Cloud-Serverumgebung

Installieren Sie vor der Installation von Tomcat ...

Ich habe einige Websites zum Thema Wohndesign herausgesucht, die ich für gut halte.

<br />Ich habe einige Websites zum Thema Woh...

Lösung für das Problem ungenauer JS-Zahlen

Die verständlichste Erklärung des Genauigkeitspro...

Lösung für MySql-Fehler 1698 (28000)

1. Problembeschreibung: MysqlERROR1698 (28000)-Lö...

Unterschiede zwischen Windows Server 2008R2, 2012, 2016 und 2019

Inhaltsverzeichnis Allgemeine Versionseinführung ...

Details nach dem Setzen des src des Iframes auf about:blank

Nachdem die Quelle des Iframes auf „about:blank“ g...

Ein einfaches Tutorial zur Verwendung des MySQL-Protokollsystems

Inhaltsverzeichnis Vorwort 1. Fehlerprotokoll 2. ...

MySQL 8.0-Fehler Der Server hat eine für die Client-Lösung unbekannte Authentifizierungsmethode angefordert

Nach der Installation der neuesten Version 8.0.11...

React implementiert Paging-Effekt

In diesem Artikel wird der spezifische Code für R...

So nummerieren Sie die Ergebnisse von MySQL-Abfragedaten automatisch

Vorwort Tatsächlich bin ich noch nie auf eine Sit...

Installieren Sie das Linux rhel7.3-Betriebssystem auf der virtuellen Maschine (bestimmte Schritte)

Installieren Sie Virtualisierungssoftware Bevor S...