Ich frage mich, ob Sie bemerkt haben, dass gewöhnliche Bildanzeigenwebsites den Wasserfall-Fluss-Effekt verwenden, den sogenannten Wasserfallfluss
Die Bilder auf der Website werden nicht auf einmal zwischengespeichert, sondern warten, bis Sie zu einer bestimmten Entfernung scrollen.
Die folgenden Bilder werden weiterhin zwischengespeichert und die Bilder werden auch zufällig angezeigt, aber die Breite ist gleich und die Höhe ist nicht
Wie hoch und niedrig sind wie Wasserfälle, so dass sie als Wasserfallflusseffekt bezeichnet werden. Als nächstes gebe ich Ihnen den Code, alle
Probieren wir einige Bilder aus.
<! DocType html> <html Lang = "en"> <head> <meta charset = "utf-8"> <title> Wasserfallfluss wiederholt nicht </title> <style> *{margin: 0px; padding: 0px; Listenstil: None;} #links; Width: 1000px; 200px; Margin-Right: 50px;} #box img {width: 200px;} </style> </head> <body> <div id = "box"> <ul> <ul> <ul> </ul> <ul> </ul> <ul> </ul> </div> <script> var box = document.GetelementByid ('Box> <ul>); var ul = box.children; Funktion Insert () {var x = 0; var srcnum = math.floor (math.random ()*35); // 35 ist 35 Bilder, die in eine beliebige Zahl geändert werden können. Ich habe hier insgesamt 35 Bilder. var newli = document.createelement ('li'); newli.innerhtml = '<img src = "Bilder/'+srcnum+'. Png">'; // Dies ist der Dateiname des Bildes, und die Anforderung ist einheitlich. var minh = math.min (ul [0] .clientHeight, ul [1] .ClientHeight, UL [2] .ClientHeight, UL [3] .ClientHeight); für (var i = 0; i <ul.length; i ++) {if (ul [i] .clientHeight == minh) {x = i; brechen; }} ul [x] .AppendChild (newli); } für (var i = 0; i <20; i ++) {insert (); } document.onscroll = function () {var viewh = document.body.clientHeight || document.documentElement.clientHeight; var wind = document.documentElement.scrollHeight; var scrollt = document.body.scrolltop || document.documentElement.scrolltop; if (winnh-scrollt-viewh <500) {für (var i = 0; i <20; i ++) {insert (); }}} </script> </body> </html>Der obige Beispielcode für die Verwendung von JS zum Anzeigen des Wasserfallflusseffekts ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.