Permettez-moi de vous montrer les rendus en premier:
Lors de la glissation sur la page Web, l'image peut être automatiquement chargée et affichée.
Le modèle de boîte qui contient des images est le suivant:
<div> <div> <img src = "img / 8.jpg"> </div> </div>
Définissez la largeur IMG à 150px, puis Box_IMG ajoute des effets de marge intérieure et d'ombre, la marge extérieure de Box est de 0, ajoutez une marge intérieure. La largeur de la boîte est étendue par la largeur IMG et les marges. En d'autres termes, il n'y a pas d'espacement entre les boîtes, mais il y a des marges à l'intérieur de la boîte. De cette façon, lorsque vous définissez la position de JS, vous n'avez pas à considérer le problème de marge, appelez simplement la largeur de la boîte.
Définissez la position de la div qui contient toutes les cases sur relative, donc lors de la définition de la valeur supérieure ou de la valeur de gauche, vous n'avez pas besoin de considérer l'attribut de marge le plus extérieur.
Placez l'image: obtenez la hauteur de la première rangée de l'image et stockez-la dans le tableau. Réglez la position sur Absolute dans l'image suivante, placez-la sous l'image avec la plus petite hauteur, puis réglez en haut et à gauche, et ajoutez la valeur minimale du tableau à la hauteur de l'image nouvellement placée. En d'autres termes, à l'exception de la première ligne, les images originales placées dans HTML sont repositionnées en JS.
Lorsque vous glissez la page en bas, la fonction de l'événement est déclenchée, puis certaines images sont placées pour assurer le chargement infini des images.
Fichier HTML:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf -"> <title> </ title> <link rel = "Stylesheet" href = "waterfall.css" type = "Text / CSS"> <script src = "waterfall.js"> </ script> </ head> </ body> id = "Content"> <div> <div> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> <v> <div> <imgg = "img / .jpg"> </ div> <v> <div> <imgg = "img / .jpg"> </ div> <v> <div> <imgg = 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> <div> <img src = "img / .jpg"> </ div> </v> <iv> <iv> <iv> 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 = 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> <img Src = "Img / .jpg"> </ Div> <div> <Img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> <v> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </v> <v> <v> <img src = "img / .jpg"> </v> <v> <v> <IMG src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <iv> src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> <div> <img> <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> <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> <v> <img src = "img / .jpg"> </v> </v> <iv> <div> <iv> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> <div> <div> <img src = "img / .jpg"> </v> <v> <div 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> <img Src = "Img / .jpg"> </ Div> <div> <Img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> </v> <img src = "img / .jpg"> </ div> </div> <div> <img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <v> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </v> </div> <iv> src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <v> <img src = "img / .jpg"> </ div> </ div> <iv> <img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </v> <v> 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> <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> <div> <img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <v> <img src = "img / .jpg"> </v> </v> src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg "> </v> <v> <v> <img> <img> src = "img / .jpg"> </ div> </ div> <div> <img> <img src = "img / .jpg"> </ div> </ div> <div> <div> <img src = "img / .j src =" img / .jpg "> </ div> <v> <v> <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> <img Src = "Img / .jpg"> </ Div> <div> <Img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> <div> <img src = "img / .jpg"> </ div> <v> <img src = "img / .jpg"> </ div> <v> <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"> </v> <v> <div> <div> <img " src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> </ div> <v> <img src = "img / .jpg"> </ div> </ div> <div> <img src = "img / .jpg"> </ div> </ div> </ html>
Fichier CSS:
* {margin:; padding :;} # contenu {position: relatif; background-Color: #;}. Box {padding: px; float: Left;}. Box_img {padding: px; border: px solide #cccccc; box-shadow: px #ccccc; border-radius: px;} img {width: px; height: Auto;}Fichier JS:
La fonction math.floor () peut être arrondie vers le bas.
Le math.min.apply (null, heightarr); La fonction peut obtenir la valeur minimale du tableau HightAr.
window.onscroll = function () {}; Cette fonction est déclenchée lors du glissement de la page.
document.DocumentElement.ClientHeight; la hauteur affichée par le navigateur.
document.DocumentElement.ScrollTop; la distance pour glisser.
/ *** créé par ASUA sur 2016/4/9. * / Window.onload = function () {imglocation ("contenu", "box"); var LodeImage = {"Date": [{"Src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, {{"src": "n. "src": "7.jpg"}, {"src": "8.jpg"}, {"src": "9.jpg"}, {"src": "10.jpg"},]} window.onscrol i = 0; i <lodeImage.date.length; i ++) {var box = document.createElement ("div"); box.classname = "box"; var carent = document.getElementById ("contenu"); carent.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 ("contenu", "box");}}} function checkFlag () {var carent = document.petelementById ("contenu"); cContent = getChildElement (cparent, "box"); var lastContentHeight = ccontent [cContent.length-1] .offsetTop; var scrollHeight = document.DocumentElement.ScrollTop || document.body.scrolltop; PageHeight = document.DocumentElement.ClientHeight || Document.Body.ClientHeight; Console.log (LastContentHeight + ":" + ScrollHeight + ":" + PageHeight); if (LastContentHeight <crollHeight + PageHeight) {return True;}} fonction Imglocation (Parent, Child) {var Carente = Document.gelement) cContent = getChildElement (cparent, enfant); var imgwidth = ccontent [0] .offsetWidth; var cols = math.floor (document.documentElement.clientWidth / imgwidth); cparent.style.csstext = "width:" + iMgwidth * Cols + "px; margin: 30x" ". heightarr = []; for (var i = 0; i <cContent.length; i ++) {if (i <cols) {heightarr.push (ccontent [i] .offsetheight);} else {var minheight = math.min.apply (null, hightarr); minindex = getminindex (heightarr, minHeight); cContent [i] .style.position = "absolu"; ccontent [i] .style.top = minHeight + "px" ; cContent [i] .style.left = cContent [minindex] .offsetleft + "px"; heightarr [minindex] + = ccontent [i] .offsetheight;}}} getMinIndex (heightarr, minHeight) {for (var i = 0; i <heightarr.length; i ++) {if (heightarr [i] == minHeight) {return i;}}} function getChildElement (parent, contenu) {var contentAr = []; var allcontent = parent.getElelementyTagname ("*"); pour (var allcontent i = 0; i <allContent.length; i ++) {if (allContent [i] .classname == contenu) {contentArr.push (allContent [i]);}} return contentArr;}D'accord, le code de l'effet d'écoulement de la cascade qui charge automatiquement des images par JS vous a été introduit ici. J'espère que cela vous sera utile!