Este artículo comparte el efecto de carga de flujo de cascada JS, cargando dinámicamente imágenes para su referencia. El contenido específico es el siguiente
Evento de desplazamiento del mouse, cuando el mouse se desplaza hacia la parte inferior, carga dinámicamente la imagen.
1. Código HTML
<! Doctype html> <html> <fead> <meta charset = "utf -8"> <title> JS realiza el efecto de flujo de cascada - imágenes de carga dinámica </title> <link rel = "stylesheet" href = "css/waterfallflow.css" type = "text/css"/> <scry script src = "waterfallflow.jss" type = "text/css"/> <scry script src = "waterfallflow.jss" typ </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> <viv> <img src = "img/5.jpg"/> </div> </div> <div> <div> <img src = "img/6.jpg"/> </div> src = "img/3.jpg"/> </div> </div> <div> <img src = "img/3.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/ <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <mit <img src = "img/2.jpg"/> </div> </div> <div> <d <img src = "img/3.jpg"/" <div> <img src = "img/4.jpg"/> </div> </div> <div> <div> <mit <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <iv> <img src = "img/6.jpg" </div> </div> </body> </html>
2. Código CSS
*{margen: 0px; Padding: 0px;}#contenedor {posición: relativo;}. box {padding: 5px; flotante: izquierda; margen: 0px auto;}. box_img {relleno: 5px; borde: 1px sólido #dcdcdc; shadow de caja: 0 0 5px #ccc; Border-Radius: 5px;}. Box_img img {ancho: 230px;}3. Código JavaScript
window.onload = function () {imglocation ("contenedor", "box"); varilla 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 cParent = document.getElementById ("Container"); for (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); // otro método agrega contenido detrás del DIV, no sobrescribir el contenido original // var content = "<div class = 'box'> <div class = 'box_img'> <img src = 'img/"+imgdata.data [i] .src+"' // cparent.innerhtml+= content;} imglocation (" Contenedor "," box ");} checkflag () {var cParent = document.getElementById ("Container"); scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // El ScrollBar es desde la altura superior var PageHeight = document.documentelement.clientHeight || document.body.clientHeight; // screen altura // console.log (lastcontentalesyight+"+scrolltop+", "+pageHeight; if (lastContentEight <scrollTop+pageHeight) {return true; num = Math.floor (document.documentelement.clientwidth/imgwidth); // Pon el número de imágenes en una fila cParent.style.csstext = "width:"+imgwidth*num+"px; margen: 0px automático"; // width var boxheightarr = []; // cada columna cajas i = 0; i <ccontent.length; i ++) {if (i <num) {boxHeigharr [i] = ccontent [i] .OffsetheTeight; índice // console.log (minHeight+","+minindex); boxheigharr [minindex]+= cContent [i] .Offsetheight; // console.log (ccontent [i] .OffSetheTeight+","+ccontent [i] .height); // ccontent [i] .height = invosteado}}} BoxHeighRAr) {if (boxHeigharr [i] == MinHeight) {return I}}} function getChildElement (parent, content) {// Tome todos los contenidos en la variedad if (allContent [i] .classname == "box") {contentarr.push (allContent [i]);Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.