Dieser Artikel teilt den Belastungseffekt des JS -Wasserfallflusses für die Referenz aller. Der spezifische Inhalt ist wie folgt
Maus -Scrolling -Ereignis, wenn die Maus nach unten scrollt, lädt das Bild dynamisch.
1. HTML -Code
<! DocType html> <html> <head> <meta charset = "utf -8"> <title> JS realisiert Wasserfallfluss -Effekt - Dynamisches Ladebilder </title> <link rel = "styleSheet" href = "css/waterfallflow.css" type = "text/css"/> <Script Src = "; </head> <body> <div id = "container"> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/3.jpg"/> </div> <div> <div> <img src = "iMg/4.jpg"/> </> </> <img. src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </> </div> <img Src = "img/7.jpg/7.jpg"/> <div> <iMgsrc = "img/7.jpg/7.jpg/7.JPG/7.JPG/7.JPG/7.JPG/7.JPG/7.JPG/7.JPG/7.jpg"/> </<dives> <img. src = "img/3.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </> </div> </div> </div> <img> <img Src <div> <img src="img/1.jpg" /> </div> </div> <div> <img src="img/2.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/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/</> </div> </div> </div> <img> <img> <img </div> </div> </body> </html>
2. CSS -Code
*{Margin: 0px; Padding: 0px;}#Container {Position: relativ;}. Box {padding: 5px; float: links; Rand: 0px auto;}. box_img {padding: 5px; Grenze: 1PX Solid #dcdcdc; Box-Shadow: 0 0 5px #CCC; Border-Radius: 5px;}. box_img img {width: 230px;}3.. Javascript -Code
window.onload = function () {imglocation ("Container", "Box"); var imgdata = {"data": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "3.jpg"}, {"src": "4.JPG", {{" 5.jpg "}, {" src ":" 6.jpg "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 3.jpg "}, {" src ":": "}, {{{" Src ". window.onscroll = function () {// console.log (document.documentElement.scrolltop); if (checkFlag ()) {var cparent = document.getElementById ("Container"); für (var i = 0; i <imgdata.data.length; i ++) {var ccontent = document.createelement ("div"); 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); // Eine andere Methode fügt Inhalte hinter dem DIV hinzu und überschreibt den ursprünglichen Inhalt nicht über. checkFlag () {var cparent = document.getElementById ("Container"); scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // Die Scrollbar stammt aus der obersten Höhe var pageHeight = document.documentElement.clientHeight || document.body.ClientHeight; // Bildschirmhöhe // Konsole.log (lastcontentHeighthight+","+Scrolltop+". if (lastContentheight <scrolltop+pageHeight) {return true; num = math.floor (document.documentElement.clientwidth/imgwidth); // Die Anzahl der Bilder in eine Zeile cparent.style.csSText = "width:"+imgwidth*num+"px; margin: 0px auto"; // container width var boxhightarr = []; i = 0; i <ccontent.length; i ++) {if (i <num) {BoxHeightarr [i] = ccontent [i] .Offseteight; console.log (minheight+"," minIndex); boxHeightArr[minIndex]+=ccontent[i].offsetHeight;// console.log(ccontent[i].offsetHeight+","+ccontent[i].height);//ccontent[i].height=undefined } }} function getMinheightLocation(boxHeightArr,minHeight){ for(var i in boxHeightArr){ if (boxHeightarr [i] == minheight) {return i}}} function getChildElement (übergeordnet, inhalt) {// alle Inhalte unter Eltern var contentarr = []; if (AllContent [i] .ClassName == "Box") {contentarr.push (AllContent [i]);Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.