In diesem Artikel wird der Pure JS -Code verwendet, um einen Wasserfall -Web -Page -Effekt zu schreiben, der zunächst ein grundlegendes Wasserfall -Flusslayout implementiert und AJAX -Daten simuliert, die neue Bildfunktion nach dem Scrollen nach unten laden.
Mangel:
1. Das Programm reagiert nicht und kann die Seitenbreite in Echtzeit nicht anpassen.
2. Wenn Ajax -Simulationsdatenbilder zum Programm hinzugefügt werden, werden alle Bilder auf der gesamten Seite einmal neu positioniert.
3. Das Programm wartet darauf, dass alle Bilder geladen werden, bevor die Größe des Bildes gelesen wird. In der Tat ist dies definitiv nicht möglich.
4. In den tatsächlichen Projekten sollte das Hintergrundprogramm den Bildgrößenwert angeben und das Breitenattribut des Bildes im JS -Code direkt verwenden.
Ideen für dieses Programm:
HTML -Struktur:
<body> <div id = "container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> </div> ... </div> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body> </body>
1. Initialisieren Sie das Layout
1. Setzen Sie #Container in Position: Relativ;
2.Boxe zu schweben: links;
3. Positionieren Sie alle Bilder, nachdem die Webseite geladen wurde.
3.1 Die Bildbreite ist festgelegt. Berechnen Sie die Anzahl der Bilder, die von jeder Zeile der aktuellen Seite untergebracht werden können, und erhalten Sie die Breite von #Container und setzen Sie dann die Seite auf die Mitte.
3.2 Schleifen Sie durch alle Bilder, das Standard -Float -Layout der ersten NUM -Bilder ist die erste Zeile und das Array -BoxHeightarr = [];
3.3 Nach Abschluss des ersten Zeilenlayouts ordnen Sie das nächste Bild- und Update -BoxHeightarr [] an:
3.3.1 Platzieren Sie das nächste Bild unter das kürzeste Bild in der ersten Zeile (Position: absolut), dh die Spalte mit der kleinsten Höhe in BoxHeightarr [] und zeichnen Sie den Indexwert der folgenden Zahlen auf: Minindex;
3.3.2 Aktualisieren Sie den kleinsten Wert in BoxHeightarr [] (BoxHeightarr [Minindex]+die aktuelle Bildhöhe);
3.4 Wiederholen Sie den Zyklus 3.3 Schritte, bis alle Bilder angeordnet sind
2. Echtzeitüberwachung der Bildlaufhöhe, ob neue Daten geladen werden sollen
1. Nach Abschluss der Initialisierung erhalten Sie die Höhe des letzten Bildes von oben: LastContentheight
2. Verwenden Sie Window.oncroll = function () {...}
Echtzeitüberwachung der Bildlaufhöhe der aktuellen Seite ist: Scrolltop
Echtzeitüberwachung der aktuellen Seitenfensterhöhe lautet: PageHeight
3. Wenn die Seite Monitore: LastContentheight <Scrolltop + PageHeight, verwenden Sie AJAX, um die JSON -Daten des neu hinzugefügten Bildes zu erhalten.
3. Fügen Sie unten auf der Seite neue Inhalte hinzu
1. Erstellen Sie zuerst einen neuen Bildcontainer, fügen Sie eine Schleife zu, fügen Sie ihn nach unten hinzu und schreiben Sie dann die entsprechenden Bilddaten wie Pfade in den JSON -Daten in den Container, um das Hinzufügen des Bildes zu vervollständigen.
2. Nachdem alle neuen Bilder hinzugefügt wurden, werden Sie den Initialisierungsvorgang von Schritt 1 für alle Bilder und Layouts der gesamten Seite erneut ausführen.
Projektordner:
Index.html: Vorab-Teil der Bilddaten
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <link rel = "styleSheet" type = "text/css" href = "CSS/style.css"/> <script src = "js/app.js> </script> </script> </title> javascript; id="container"> <div> <div> <img src="img/1.jpg"/> </div> </div> <div> <img src="img/2.jpg"/> </div> </div> <div> <img src="img/3.jpg"/> </div> </div> <div> <img src="img/4.jpg"/> </div> </div> <div> <img src="img/4.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/5.jpg"/> </div> </div> <div> <img src="img/6.jpg"/> </div> </div> <div> <img src="img/7.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <div> <img src="img/10.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </> </div> <img src = "img/3.jpg"/i Div> <img. src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </> </div> <img src = "img/6.jpg/6.JPG/6.JPG/6.jpg"/> </<dives> <img. src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </> </div> <img Src = "img/6.jpg/6.jpg"/> <div> <img Src = "img/6.jpg/6.jpg"/> </<dives> <img = "img/6.jpg/6.jpg/6.JPG/6.JPG/6.JPG/6.JPG/6.JPG"/> </> </<dives> <div> <img. src="img/6.jpg"/> </div> </div> </div> <div> <div> <img src="img/7.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/10.jpg"/> </div> </div> <div> <img src="img/1.jpg"/> </div> </div> <div> <img src="img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img Src = "img/4.jpg"/> </> </div> <img> <img> <img> <img> <img> <img> <img> <img Src = IMG/iMg/4.JPG "/> </> </div> <iMg Src =" IMG Src = "/4.JPG"/> </> </div> <iMg Src = "IMG Src ="/4.JPG "/> </> </div> <iMg Src =" IMG Src = "/4.jpg"/> </div> <img> <img Src = "iMg. <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img Src = "img/6.jpg"/> </> </div> <img> <img> <img> <img> <img> <img> <img Src = IMG/JPG "/> </> </div> <img> <img Src =" IMg Src = "/> </> </div> <img Src =" IMG Src = "/> </> </div> <img> <img Src =" IMG Src = "/> </> </div> <img> <img Src = IMg/JPG"/> </> </div> <img> <img Src = IMG Src = "IMG. <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <img Src = "img/10.jpg"/> </div> </div> </div> </div> </</div> </</div> </</ph> </</</</</</</</body> </body> </html "
style.css:
*{Margin: 0; Padding: 0;}#Container {Position: relativ;}. Box {padding: 5px; float: links;}. box_img {padding: 5px; Grenze: 1PX Solid #CCC; Box-Shadow: 0 0 5px #CCC; Border-Radius: 5px;}. box_img img {width: 150px; Höhe: auto;}app.js:
window.onload = function () {imglocation ("Container", "Box"); // AJAX Simulierte Daten var imgdata = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jp g"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"8.jpg"}]} window.onscroll = function () {if (checkFlag ()) {// Beurteilen Sie, ob neue Daten am unteren Boden geladen werden sollen. // AJAX -Daten in die Seite für (var i = 0; i <imgdata.data.length; i ++) {var ccontent = document.createelement ("div") laden; ccontent.className = "box"; CPARENT.AppendChild (ccontent); var boximg = document.createelement ("div"); boximg.classname = "box_img"; CContent.AppendChild (Boximg); var img = document.createelement ("img"); img.src = "img/"+imgdata.data [i] .src; Boximg.AppendChild (IMG); } // Alle Bilddaten einmal iMGlocation ("Container", "Box") neu positionieren; }}}; Funktion checkFlag () {var cparent = document.getElementById ("Container"); var ccontent = getChildElement (CPARENT, "Box"); // Erhalten Sie die Höhe des letzten Bildes von oben, Scrollhöhe, Fensterhöhe var lastcontentheight = ccontent [ccontent.length-1] .offsettop; var scrolltop = document.documentElement.scrolltop || document.body.scrolltop; var pageHeight = document.documentElement.clientHeight || document.body.clientHeight; console.log (lastContentHeight+":"+scrolltop+":"+pageHeight); if (lastContentHeight <scrolltop + pageHeight) {return true; }} function imglocation (übergeordnet, Inhalt) {// Nehmen Sie alle Inhalte unter Eltern aus var cparent = document.getElementById (übergeordnet); var ccontent = getChildElement (CPARENT, Inhalt); // Die Anzahl der Bilder pro Zeile gemäß der Breite des aktuellen Browserfensters korrigieren und beheben. // offsetwidth = width + padding + border var num = math.floor (document.documentElement.clientwidth /imgwidth); cparent.Style.csStext = "width:"+imgwidth*num+"px; margin: 0 auto"; // alarm ("pause"); // Setzen Sie ein Array, um die Bildinformationen der ersten Zeile var BoxHeightarr = [] zu hosten; für (var i = 0; i <ccontent.length; i ++) {if (i <num) {// Aufzeichnung der Höhe des Bildes in der ersten Zeile BoxHeightarr [i] = ccontent [i] .Offseteight; // Wenn die AJAX -Daten geladen werden, repodiert das Programm alle Bilder neu, sodass das Bild in der ersten Zeile gelöscht werden muss: Absolutes Ccontent [i] .style.position = "static"; } else {var minHeight = math.min.apply (null, boxHeightarr); var minIndex = getMinHeightLocation (BoxHeightarr, Minheight); // Das Bild unter den kleinsten Indexwert der ersten Zeile CContent [i] .Style.position = "Absolute"; ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = ccontent [minIndex] .offsetleft+"px"; // Aktualisieren Sie nach dem Aufbau des Bildes die "Mindesthöhe der ersten Bildinformationen", // dann die für die Loop für die Schleife, um diese Aktion zu wiederholen, bis das EndboxHeightarr [minIndex] = boxHeightarr [minIndex] + ccontent [i] .Offseteight; }};} // Erhalten Sie den Indexwert mit der kleinsten Höhe der ersten Bildreihe GetMinHeightLocation (BoxHeightarr, minheight) {für (var i in boxHeightarr) {if (boxHeightarr [i] == minheight) {return i; }}} // Alle BoxFunction getChildElement (Eltern, Inhalt) {contentarr = parent.getElementsByClassName (Inhalt) erhalten; Contentarr zurückgeben;}Reproduktionsbild:
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.