Lassen Sie mich Ihnen zuerst die Renderings zeigen:
Beim Schieben der Webseite kann das Bild automatisch geladen und angezeigt werden.
Das Box -Modell, das Bilder enthält, lautet wie folgt:
<div> <div> <img src = "img/8.jpg"> </div> </div>
Setzen Sie die IMG-Width auf 150px, dann fügt Box_img den inneren Rand- und Schatteneffekten hinzu, der äußere Rand von Box ist 0, fügen Sie den inneren Rand hinzu. Die Breite der Schachtel wird von IMG-Breite und Rändern ausgestreckt. Mit anderen Worten, es gibt keinen Abstand zwischen Kisten, aber es gibt einige Ränder im Kasten. Auf diese Weise müssen Sie beim Einstellen der Position von JS das Problem mit dem Margen nicht berücksichtigen. Rufen Sie einfach die Breite des Box an.
Stellen Sie die Position des DIV ein, der alle Kästchen auf relatives Halten halten. Wenn Sie also den Top -Wert oder den linken Wert festlegen, müssen Sie das äußerste Margenattribut nicht berücksichtigen.
Platzieren Sie das Bild: Holen Sie sich die Höhe der ersten Reihe des Bildes und speichern Sie es im Array. Stellen Sie die Position im nächsten Bild auf absolut ein, platzieren Sie sie mit der kleinsten Höhe unter das Bild, stellen Sie dann oben und links ein und fügen Sie den Mindestwert des Arrays auf die Höhe des neu platzierten Bildes hinzu. Mit anderen Worten, mit Ausnahme der ersten Zeile werden die in HTML platzierten Originalbilder in JS neu positioniert.
Wenn die Seite nach unten schieben, wird die Ereignisfunktion ausgelöst, und dann werden einige Bilder aufgestellt, um das unendliche Laden der Bilder zu gewährleisten.
HTML -Datei:
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-"> <title> </title> <link rel = "stylesheet" href = "waterfall id="content"><div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><div><img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img src="Img/.jpg"></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img Src = "img/.jpg"> </div> </div> <img/.jpg "> </</div> <img/. src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img Src = "img/.jpg"> </</div> </div> </div> </</div> </</div> </</div> </</div> </</div> </</div> </</div> </</div> </</div> </</div> </</div> </</div. src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img> <img src = "img/.jpg"> </div> </div> <img> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg "> </div> <div> <img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div></div><div><img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img Src = "img/.jpg"> </div> </div> <img = "img/.jpg"> </</div> </div> <img = "iMg/.jpg"> </</div> </div> <img/. src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div></div><div><img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img Src = "img/.jpg"> </div> </div> <img Src = "img/.jpg"> </div> </div> </div> </iMg/.JPG "> </</div> </div> </div> </</div> </</div. src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <img src = "img/.jpg"> </div> </div> <img Src = "img/.jpg"> </div> </div> </divc = "</. src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img Src = "img/.jpg"> </div> <img/.jpg "> </</div> <img/.jpg"> </</div> <img/. src="Img/.jpg"></div></div><div><img><img src="Img/.jpg"></div></div><div><div><img src="Img/.j src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div></div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div><div><div><img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <img Src = "img/.jpg"> </div> </divc = "img/.jpg"
CSS -Datei:
*{margin:; padding:;} #content {Position: relativ; Hintergrundfarbe: #;}. Box {padding: px; float: links;}. box_img {padding: px; border: px solid #cccc; box-shadow: px #cccc; border-radius: px;} img {width: px; hoh: px; {} img {width: px; hoh: px;} img {width: px #ccccccccccc;} img {widdh: px; hylo} img;JS -Datei:
Die Funktion math.floor () kann nach unten gerundet werden.
Die math.min.apply (null, heightarr); Funktion kann den Mindestwert des Heighrarr -Arrays erhalten.
window.onscroll = function () {}; Diese Funktion wird beim Schieben der Seite ausgelöst.
document.documentElement.clientHeight; Die vom Browser angezeigte Höhe.
document.documentElement.scrolltop; die Entfernung zum Schieben.
/*** Erstellt von ASUA am 2016/4/9. lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{ "src": "7.jpg"}, {"src": "8.jpg"}, {"src": "9.jpg"}, {"src": "10.jpg"},]} window.onScoll = function () {if (teckflag ()) {für (var i = 0; i <lodeImage.date.length; i ++) {var box = document.createelement ("div"); box.className = "box"; var cparent = document.getElementById ("Inhalt"); cparent.appendchild (box); var box_img = document.createelement ("div"); box_img.classname = "box_img"; box.appendchild (box_img); var img = document.createelement ("img"); img.src = "img/"+lodeImage.date [i] .src; box_img.appendchild (img);} imglocation ("content", "box");}} Funktion} {) {var cparent = document. ccontent = getChildElement (CPARENT, "Box"); var lastcontentHeight = ccontent [ccontent.length-1] .offsettop; var scrollHeight = document.documentElement.scrolltop || document.body.scrolltop; var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);if(lastContentHeight<scrollHeight+pageHeight){return true;}}function imgLocation(parent,child){var cparent=document.getElementById(parent);var ccontent = getChildElement (cparent, child); var imgwidth = ccontent [0] .offsetwidth; var cols = math.floor (document.cumentElement.clientwidth/imgwidth); Heightarr = []; für (var i = 0; i <content.length; i ++) {if (i <cols) {heigharr.push (ccontent [i] .Offseteight);} else {var matheight = math.min.apply (null, heightarr); var minIndex = getMinIndex (Heigharr, minheight); ccontent [i] .Style.position = "Absolute"; ; GetMinIndex (Heigharr, Minhohy) {für (var i = 0; i <Heigharr.Length; i ++) {if (heigharr [i] == minheight) {return i;}}} Funktion GetChildelement (übergeordnet, Inhalt) {var contentarr = []; var AllContent = parent.getelements ("; i = 0; i <AllContent.Length; i ++) {if (AllContent [i] .className == Inhalt) {contentarr.push (AllContent [i]);}} return contentarr;}Okay, der Code für den Wasserfallflusseffekt, der Bilder automatisch von JS lädt, wurde Ihnen hier vorgestellt. Ich hoffe, es wird für Sie hilfreich sein!