Este artículo utiliza el código JS puro para escribir un efecto de página web de flujo de cascada, inicialmente implementando un diseño básico de flujo de cascada y simula los datos de AJAX que carga la nueva función de imagen después de desplazarse a la parte inferior.
defecto:
1. El programa no responde y no puede ajustar el ancho de la página en tiempo real;
2. Cuando se agregan imágenes de datos de simulación AJAX al programa, todas las imágenes en toda la página se reposicionan una vez.
3. El programa espera a que se carguen todas las imágenes antes de leer el tamaño de la imagen. De hecho, esto definitivamente no es posible.
4. En proyectos reales, el programa de fondo debe dar el valor del tamaño de la imagen y usar directamente el atributo de ancho de la imagen en el código JS.
Ideas para este programa:
Estructura HTML:
<body> <div id = "Container"> <Div> <Viv> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> </div> ... </div> </body>
1. Inicializar el diseño
1. Establezca #Container en la posición: relativo;
2. Establecer .Box para flotar: izquierda;
3. Posicione todas las imágenes después de cargar la página web;
3.1 El ancho de la imagen es fijo. Calcule el número de imágenes que se pueden acomodar por cada fila de la página actual, y obtener el ancho de #Container, y luego configure la página en el centro;
3.2 Luce a través de todas las imágenes, el diseño de flotación predeterminado de las primeras imágenes de NUM es como la primera fila, y la matriz boxheigharr = [];
3.3 Después de completar el diseño de la primera línea, organice la siguiente imagen y actualice Boxheigharr []:
3.3.1 Coloque la siguiente imagen debajo de la imagen más corta en la primera fila (posición: absoluta), es decir, la columna con la altura más pequeña en Boxheigharr [], y registre el valor de índice de los siguientes números: Minindex;
3.3.2 Actualice el valor más pequeño en Boxheigharr [] (Boxheigharr [minindex]+la altura de la imagen actual);
3.4 Repita el ciclo 3.3 pasos hasta que se organicen todas las imágenes
2. Monitoreo en tiempo real de la altura de desplazamiento, ya sea que se carguen nuevos datos
1. Después de completar la inicialización, obtenga la altura de la última imagen desde la parte superior: LastContentheight
2. Use Window.onscroll = function () {...}
El monitoreo en tiempo real de la altura de desplazamiento de la página actual es: Scrolltop
El monitoreo en tiempo real de la altura actual de la ventana de la página es: PageHeight
3. Cuando la página monitorea: LastContentEight <scrolltop + pageHeight, use AJAX para obtener los datos JSON de la imagen recién agregada.
3. Agregue contenido nuevo en la parte inferior de la página
1. Use un bucle para crear un nuevo contenedor de imágenes primero, agréguelo a la parte inferior y luego escriba los datos de imagen correspondientes, como rutas en los datos JSON al contenedor para completar la adición de la imagen.
2. Después de agregar todas las imágenes nuevas, vuelva a ejecutar la operación de inicialización del paso 1 para todas las imágenes y diseños de toda la página.
Carpeta del proyecto:
index.html: parte previa al lugar de los datos de la imagen
< id = "Container"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <div> <img src = "img/3.jpg"/> </div> </iv> <iv> <img sg sg s </div> </div> <viv> <img src = "img/4.jpg"/> </div> </div> <viv> <div> <img src = "img/5.jpg"/> </div> </div> <viv> </div> </div> <viv> <img src = "img/7.jpg"/> </div> </div> <viv> <div> <img src = "img/8.jpg"/> </div> </div> <viv> </div> </div> <viv> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <div> <img src = "img/10.jpg"/> </div> </div> <iMG src="img/1.jpg"/> </div> </div> <div> <img src="img/1.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 src="img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> src = "img/6.jpg"/> </div> </div> </div> <div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <mit <img src = "img/8.jpg"/> </div> </div> <driv> <img src = "img/8.jpg" <Div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/10.jpg"/> </div> </div> <div> <mit <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/1.jpg" <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> <d <img src = "img/4.jpg" <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <mit <img src = "img/6.jpg"/> </div> </div> <div> <d <img src = "img "jpg"/" <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <mit <img src = "img/9.jpg"/> </div> </div> <div> <iMg src = "iMg/9.jpg" <div> <img src = "img/9.jpg"/> </div> </div> <div> <div> <img src = "img/9.jpg"/> </div> </div> <iv> <div> <div> <img src = "img/10.jpg"/> </div> </div> </iv> </body> </html>
style.css:
*{margen: 0; Padding: 0;}#contenedor {posición: relativo;}. box {relleno: 5px; float: izquierda;}. box_img {relleno: 5px; borde: 1px sólido #ccc; shadow de caja: 0 0 5px #ccc; border-radio: 5px;}. box_img img {ancho: 150px; Altura: Auto;}App.js:
window.onload = function () {imglocation ("contenedor", "box"); // Datos simulados AJAX var imgData = {"Data": [{"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, {"src": "6.jpg"}, {"src": "8.jp" g "}, {" src ":" 2.jpg "}, {" src ":" 3.jpg "}, {" src ":" 4.jpg "}, {" src ":" 5.jpg "}, {" src ":" 6.jpg "}, {" src ":" 8.jpg "}]}] Window.onscroll = function () {if (checkflag ()) {// juzga si se van a cargar nuevos datos en la parte inferior var cParent = document.getElementById ("Container"); // Cargar datos de Ajax en la página para (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); } // reposicionar todos los datos de imagen una vez imglocation ("contenedor", "cuadro"); }}}; función checkFlag () {var cParent = document.getElementById ("Container"); var ccontent = getChildelement (cParent, "box"); // Obtenga la altura de la última imagen desde la parte superior, altura de desplazamiento, altura de la ventana var lastContentheight = cContent [cContent.length-1] .Offsettop; var scrollTop = document.documentelement.scrolltop || document.body.scrolltop; var pageHeight = document.documentelement.clientHeight || document.body.clientHeight; console.log (LastContentEight+":"+ScrollTop+":"+PageHeight); if (lastContentEight <scrollTop + pageHeight) {return true; }} función imglocation (parent, content) {// Tome todos los contenidos en Parent de var cParent = document.getElementById (parent); var cContent = getChildelement (cParent, content); // corree el número de imágenes por línea de acuerdo con el ancho de la ventana del navegador actual y corríjela, Center var imgwidth = cContent [0] .OffsetWidth; // offsetWidth = ancho + padding + border var num = math.floor (document.documentelement.clientwidth /imgwidth); cParent.style.csstext = "Width:"+imgwidth*num+"px; margin: 0 auto"; // alerta ("pausa"); // Establecer una matriz para alojar la información de imagen de la primera fila var boxheigharr = []; for (var i = 0; i <ccontent.length; i ++) {if (i <num) {// registra la altura de la imagen en la primera fila boxheigharr [i] = ccontent [i] .Offsetheight; // Cuando se cargan los datos de AJAX, el programa reposiciona todas las imágenes, por lo que la imagen en la primera fila debe borrar la posición: absoluto ccontent [i] .style.position = "static"; } else {var minHeight = math.min.apply (null, boxheigharr); var minIndex = getMinHeightLocation (Boxheigharr, Minheight); // Ponga la imagen debajo del valor de índice más pequeño de la primera fila ccontent [i] .style.position = "Absolute"; ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = cContent [minindex] .Offsetleft+"px"; // Después de colocar la imagen, actualice la "altura mínima de la primera fila de información de imagen", // luego use el bucle for para repetir esta acción hasta el final boxheigharr [minindex] = boxheigharr [minindex] + ccontent [i] .offsetheTheight; }};} // Obtenga el valor de índice con la altura más pequeña de la primera fila de imagen getMinheightLocation (boxheigharr, minheight) {for (var i en boxheigharr) {if (boxheigharr [i] == minheight) {return i; }}} // Obtener todo BoxFunction getChildelement (parent, content) {contentarr = parent.getElementsByClassName (content); return contentarr;}Imagen de reproducción:
Lo anterior se trata de este artículo, espero que sea útil para todos aprender la programación de JavaScript.