Cet article partage l'effet de chargement de débit de la cascade JS, chargeant dynamiquement des images pour votre référence. Le contenu spécifique est le suivant
Événement de défilement de souris, lorsque la souris défile vers le bas, charge dynamiquement l'image.
1. Code HTML
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> js réalise l'effet de flux de cascade - les images de chargement dynamique </tapt> <link rel = "Stylesheet" href = "css / waterfallflow.css" type = "text / css" /> <script src = "js / waterfallflowfwr </head> <body> <div id="container"> <div> <div> <img src="img/1.jpg" /> </div> </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/6.jpg" /> </div> </div> <div> <img src="img/7.jpg" /> </div> </div> <div> <img src = "img / 3.jpg" /> </ div> </ div> <div> <img src = "img / 3.jpg" /> </ div> </ div> <v> <img src = "img / 1.jpg" /> </ div> </ div> </ div> <v> <v> <img src = "img / 2.jp" <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> <div> <img src = "img / 5.jpg" /> </ div> </ div> <v> <img src = "img / 5.jpg" /> </ div> </ div> <v> <img src = "img / n.jp" </div> </div> </ body> </html>
2. Code CSS
* {margin: 0px; rembourrage: 0px;} # conteneur {position: relative;}. Box {padding: 5px; flottant: à gauche; marge: 0px auto;}. box_img {padding: 5px; Border: 1px solide #dcdcdc; Box-shadow: 0 0 5px #ccc; Border-Radius: 5px;}. Box_img IMG {largeur: 230px;}3. Code javascript
window.onload = function () {imglocation ("conteneur", "box"); var imgdata = {"data": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "3.jpg"}, {"Src": "4.jpg"}, {"src": " 5.jpg "}, {" src ":" 6.jpg "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 3.jpg "}, {" src ":" 4.jpg "}, {" src ":" 5.jpg "} window.onscroll = function () {// console.log (document.DocumentElement.ScrollTop); if (checkFlag ()) {var carent = document.getElementyId ("conteneur"); pour (var i = 0; i <imgdata.data.length; i ++) {var cContent = document.CreateElement ("div"); cContent.className = "Box"; CParent.ApendChild (ccontent); var boxImg = document.CreateElement ("div"); boximg.classname = "box_img"; CContent.ApendChild (BoxImg); var img = document.CreateElement ("img"); img.src = "img /" + imgdata.data [i] .src; BoxImg.ApendChild (IMG); // autre méthode ajoute du contenu derrière le div, ne pas écraser le contenu d'origine // var contenu = "<div class = 'box'> <div class = 'box_img'> <img src = 'iMg /" + imgdata.data [i] .src + "' '// carent.innerhtml + = contenu;} imglocation (" conteneur "," box "); CheckFlag () {var cparent = document.getElementById ("conteneur"); scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // La barre de scroll est de la hauteur supérieure var pageHeight = document.DocumentElement.clientHeight || document.body.clientHeight; // Screen Height // Console.log (LastContentHeight + "," + ScrollTop + "," + PageHeight); if (LastContentHeight <ScrollTop + PageHeight) {return true;}} fonction imlocation (parent, contenu) {var carent = document.getElementyid (parent); num = math.floor (document.DocumentElement.ClientWidth / ImgWidth); // Mettez le nombre d'images dans une ligne CParent.style.csstext = "Width:" + imgwidth * num + "px; margin: 0px auto"; // width width var boxEightArr = []; // Corman i = 0; i <ccontent.length; i ++) {if (i <num) {boxHeightarr [i] = ccontent [i] .offsetHeight; 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) if (boxHeightarr [i] == minHeight) {return i}}} function getChildElement (parent, contenu) {// prendre tous les contenus sous le contenu var = []; if (allContent [i] .classname == "box") {contentArr.push (allContent [i]);Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.