He visto a JavaScript por parte de la maestra Amy para implementar el flujo de cascada en estos días, así que seguí el código. Descubrí que escribir así solo puede adaptarse a la pantalla al cargar por primera vez, y luego cambiar el tamaño de la ventana no podrá adaptarse.
Así que pensé en usar la ventana. Controlizar para que el flujo de cascada funcione recién cargue para lograr el objetivo.
La copia del código es la siguiente:
window.onload = function () {
// función de flujo de cascada
cascada ('contenido', 'caja');
// simular la carga de datos
var dataint = {"Data": [{"src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr c ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}
// Cuando cambia el tamaño de la pantalla, la función de flujo de cascada se volverá a adaptar.
window.onresize = function () {
// cascada ('contenido', 'caja');
setTimeOut (function () {cascada ('contenido', 'box');}, 200);
}
window.onscroll = function () {
if (checkScroll ()) {
var al aire libre = document.getElementById ('contenido');
// Agregar los datos teñidos a HTML
for (var i = 0; i <dataint.data.length; i ++) {
var obox = document.createElement ("div");
obox.classname = "box";
Outdoor.appendChild (OBOX);
var opic = document.createElement ("div");
opic.classname = "pic";
OBOX.AppendChild (OPIC);
var oimg = document.createElement ("img");
oimg.src = "img/"+dataint.data [i] .src;
OPIC.AppendChild (OIMG);
}
cascada ('contenido', 'caja');
}
}
}
Está bien cuando la pantalla se reduce, pero aparece un error desde el zoom-in
No vi que la parte superior de las siguientes columnas no pueda volver.
Así que abrí la herramienta de desarrollo para ver lo que sucedió.
No debe haber estilo en el 5º Div. Es porque se lo agregó cuando se redujo, pero se agrandó y no lo aclaró, por lo que parecería si se retuvo. Entonces: Agregué la oración ABOX [i] .style.csstext = '' a la función de flujo de cascada; para que cada vez que entro, despeje el estilo
La copia del código es la siguiente:
Cascada de funciones (padre, caja) {
// Saque todas las cajas de clase en contenido
var aparent = document.getElementById (parent);
var abox = getBClass (aparent, box);
// consigue el ancho de la caja
var aboxw = abox [0] .OffsetWidth;
// Use el ancho del navegador para dividir el ancho de la caja para obtener el número de columnas
var cols = math.floor (document.documentelement.clientwidth/aboxw);
// Establecer el ancho y el centro del contenido
Aparent.style.csstext = 'Width:'+aboxw*cols+'px; altura: auto; posición: relativo; margen: 0 automático; right-right: 15px ';
// Crear matriz de altura para cada columna
var Harr = [];
para (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
if (i <cols) {
harr.push (abox [i] .Offsetheight);
}demás{
var minh = math.min.apply (null, harr);
Var index = getMinIndex (Harr, Minh); // Descubre el valor del índice con la altura más corta
//console.log(ABOXW);
abox [i] .style.position = 'Absolute';
abox [i] .style.top = minh+'px';
abox [i] .style.left = aboxw*index+'px';
Harr [índice]+= abox [i] .Offsetheight;
}
}
}
Esto resuelve el error que no se puede devolver después de encogerse y puede adaptarse normalmente
Finalmente, publiqué todo el JavaScript
La copia del código es la siguiente:
window.onload = function () {
// función de flujo de cascada
cascada ('contenido', 'caja');
// simular la carga de datos
var dataint = {"Data": [{"src": "01.jpg"}, {"src": "02.jpg"}, {"src": "03.jpg"}, {"sr c ":" 04.jpg "}, {" src ":" 05.jpg "}, {" src ":" 06.jpg "}, {" src ":" 07.jpg "}]}
// Cuando cambia el tamaño de la pantalla, la función de flujo de cascada se volverá a adaptar.
window.onresize = function () {
// cascada ('contenido', 'caja');
setTimeOut (function () {cascada ('contenido', 'box');}, 200);
}
window.onscroll = function () {
if (checkScroll ()) {
var al aire libre = document.getElementById ('contenido');
// Agregar los datos teñidos a HTML
for (var i = 0; i <dataint.data.length; i ++) {
var obox = document.createElement ("div");
obox.classname = "box";
Outdoor.appendChild (OBOX);
var opic = document.createElement ("div");
opic.classname = "pic";
OBOX.AppendChild (OPIC);
var oimg = document.createElement ("img");
oimg.src = "img/"+dataint.data [i] .src;
OPIC.AppendChild (OIMG);
}
cascada ('contenido', 'caja');
}
}
}
Cascada de funciones (padre, caja) {
// Saque todas las cajas de clase en contenido
var aparent = document.getElementById (parent);
var abox = getBClass (aparent, box);
// consigue el ancho de la caja
var aboxw = abox [0] .OffsetWidth;
// Use el ancho del navegador para dividir el ancho de la caja para obtener el número de columnas
var cols = math.floor (document.documentelement.clientwidth/aboxw);
// Establecer el ancho y el centro del contenido
Aparent.style.csstext = 'Width:'+aboxw*cols+'px; altura: auto; posición: relativo; margen: 0 automático; right-right: 15px ';
// Crear matriz de altura para cada columna
var Harr = [];
para (var i = 0; i <abox.length; i ++) {
abox [i] .style.csstext = '';
if (i <cols) {
harr.push (abox [i] .Offsetheight);
}demás{
var minh = math.min.apply (null, harr);
Var index = getMinIndex (Harr, Minh); // Descubre el valor del índice con la altura más corta
//console.log(ABOXW);
abox [i] .style.position = 'Absolute';
abox [i] .style.top = minh+'px';
abox [i] .style.left = aboxw*index+'px';
Harr [índice]+= abox [i] .Offsetheight;
}
}
}
// Obtener elemento según la clase
función getBclass (parent, classname) {
var boxarr = new Array (); // utilizado para almacenar la clase obtenida
//console.log(parent.prototype);
AllElement = parent.getElementsByTagName ('*');
para (var i = 0; i <alelement.length; i ++) {
if (alelement [i] .classname == classname) {
Boxarr.push (Alelement [i]);
}
}
regresar Boxarr;
}
// Descubre el valor de índice más corto
función getminindex (arr, valor) {
para (var i en arr) {
if (arr [i] == valor) {
regresar i;
}
}
}
// Crear una función que detecte si el deslizamiento de la rueda es verdadero o no y devuelve verdadero o falso
function checkScroll () {
var al aire libre = document.getElementById ("contenido");
var obox = getBClass (oparent, 'box');
var lastoboxtop = obox [obox.length-1] .Offsettop+Math.floor (OBOX [OBOX.LENTHT-1] .OffsetHEight/2);
//console.log(lastOboxTop);
var scrollTop = document.body.scrolltop || document.documentelement.scrolltop;
var altura = document.body.clientheight || document.documentelement.clientHeight;
//console.log(Scrolltop);
return (lastoboxtop <scrolltop+altura)? Verdadero: falso;
}
Publicado con el archivo CSS
La copia del código es la siguiente:
*{margen: 0; relleno: 0;}
Cuerpo {Color de fondo: #EEE;}
.contenido{
Posición: relativo;
}
.caja{
relleno: 15px 0 0 15px;
flotante: izquierda;
}
.pic {
relleno: 10px;
borde: 1px sólido #ccc;
Box Shadow: 0 0 5px #CCCCCCCCC;
Border-Radius: 5px;
Antecedentes: #ffff;
}
.pic img {
Ancho: 220px;
Altura: Auto;
Border: 1px Solid #EEE;
}
Publicado en el archivo HTML
La copia del código es la siguiente:
<! Doctype html>
<html>
<Evista>
<meta charset = "utf-8" />
<title> JavaScript Waterfall Flow </title>
<link rel = "stylesheet" type = "text/css" href = "css/pubuli.css"/>
<script type = "text/javaScript" src = "js/my.js">/script>
</ablo>
<Body>
<div id = "contenido">
<div>
<div>
<img src = "img/01.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/02.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/03.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/04.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/05.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/06.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/07.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/08.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/09.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/10.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/11.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/12.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/13.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/14.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/15.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/16.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/17.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/18.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/19.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/20.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/21.jpg"/>
</div>
</div>
<div>
<div>
<img src = "img/22.jpg"/>
</div>
</div>
</div>
</body>
</html>
Bien, gracias por mirar. Nunca antes había escrito artículos técnicos para compartir. Hay muchos aspectos desconsiderados que espero que puedan corregirlos. Los pequeños novatos que aprenden la parte delantera dan y (^_^) y