Problemas e soluções encontradas na implementação da adaptação de fluxo em cascata por JavaScript

Autor：Eve Cole Data da Última Atualização：2025-06-01 20:16:01

Eu vi o uso do JavaScript pelo professor Amy para implementar o fluxo de cascata nos dias de hoje, então segui o código. Descobri que escrever como essa só pode se adaptar à tela ao carregar pela primeira vez e alterar o tamanho da janela não poderá se adaptar.

Por isso, pensei em usar o Window.OnResize para fazer com que o fluxo em cascata funcione recentemente para atingir a meta.

A cópia do código é a seguinte:

window.onload = function () {

// Função de fluxo em cascata

Cachoeira ('conteúdo', 'caixa');

// simular o carregamento de dados

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 "}]}

// Quando o tamanho da tela mudar, a função de fluxo em cascata será re-adaptada.

window.onResize = function () {

// cachoeira ('conteúdo', 'caixa');

setTimeout (function () {Catina ('Content', 'Box');}, 200);

}

window.onscroll = function () {

if (checkScroll ()) {

var Outdoor = document.getElementById ('content');

// Adicione os dados manchados em HTML

for (var i = 0; i <datant.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);

}

Cachoeira ('conteúdo', 'caixa');

}

Tudo bem quando a tela é reduzida, mas um bug aparece no zoom-in

Não vi que o topo das próximas colunas não pode voltar.

Então, abri a ferramenta de desenvolvimento para ver o que aconteceu.

Não deve haver estilo na 5ª div. É porque foi adicionado a ele quando estava diminuindo, mas foi ampliado e não limpou, por isso pareceria se fosse retido. Então: adicionei a frase abox [i] .style.csStext = '' à função de fluxo em cascata; para que toda vez que eu entro, limpo o estilo

A cópia do código é a seguinte:

função cachoeira (pai, caixa) {

// Retire todas as caixas de aula sob conteúdo

var aparent = document.getElementById (pai);

var abox = getBclass (aparent, caixa);

// Obtenha a largura da caixa

var aboxw = abox [0] .offsetWidth;

// Use a largura do navegador para dividir a largura da caixa para obter o número de colunas

var cols = math.floor (document.documentElement.clientwidth/aboxw);

// Defina a largura e o centro do conteúdo

Aparent.style.csStext = 'Largura:'+ABOXW*cols+'px; altura: Auto; posição: relativa; Margem: 0 Auto; Right-Right: 15px ';

// Crie uma matriz de altura para cada coluna

var Harr = [];

for (var i = 0; i <abox.length; i ++) {

ABOX [i] .style.csStext = '';

if (i <cols) {

Harr.push (ABOX [i] .offSethEight);

}outro{

var minh = Math.min.Apply (null, Harr);

var index = getMinIndex (Harr, Minh); // Descubra o valor do índice com a altura mais curta

//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;

}

Isso resolve o bug que não pode ser devolvido após o encolhimento e pode se adaptar normalmente

Finalmente, eu postei o javascript inteiro

A cópia do código é a seguinte:

window.onload = function () {

// Função de fluxo em cascata

Cachoeira ('conteúdo', 'caixa');

// simular o carregamento de dados

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 "}]}

// Quando o tamanho da tela mudar, a função de fluxo em cascata será re-adaptada.

window.onResize = function () {

// cachoeira ('conteúdo', 'caixa');

setTimeout (function () {Catina ('Content', 'Box');}, 200);

}

window.onscroll = function () {

if (checkScroll ()) {

var Outdoor = document.getElementById ('content');

// Adicione os dados manchados em HTML

for (var i = 0; i <datant.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);

}

Cachoeira ('conteúdo', 'caixa');

}

função cachoeira (pai, caixa) {

// Retire todas as caixas de aula sob conteúdo

var aparent = document.getElementById (pai);

var abox = getBclass (aparent, caixa);

// Obtenha a largura da caixa

var aboxw = abox [0] .offsetWidth;

// Use a largura do navegador para dividir a largura da caixa para obter o número de colunas

var cols = math.floor (document.documentElement.clientwidth/aboxw);

// Defina a largura e o centro do conteúdo

Aparent.style.csStext = 'Largura:'+ABOXW*cols+'px; altura: Auto; posição: relativa; Margem: 0 Auto; Right-Right: 15px ';

// Crie uma matriz de altura para cada coluna

var Harr = [];

for (var i = 0; i <abox.length; i ++) {

ABOX [i] .style.csStext = '';

if (i <cols) {

Harr.push (ABOX [i] .offSethEight);

}outro{

var minh = Math.min.Apply (null, Harr);

var index = getMinIndex (Harr, Minh); // Descubra o valor do índice com a altura mais curta

//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;

}

// Obtenha elemento de acordo com a classe

function getBclass (pai, className) {

var boxarr = new Array (); // usado para armazenar a classe obtida

//console.log(parent.prototype);

allement = parent.getElementsByTagName ('*');

for (var i = 0; i <allelement.length; i ++) {

if (allement [i] .className == ClassName) {

boxarr.push (allexo [i]);

}

retornar boxarr;

}

// Descubra o mais curto valor do índice

função getMinIndex (arr, value) {

para (var i em arr) {

if (arr [i] == valor) {

retornar i;

}

// Crie uma função que detecte se o deslizamento da roda é verdadeiro ou não e retorna

função checkScroll () {

var Outdoor = document.getElementById ("Content");

var obox = getBclass (oparente, 'caixa');

var lastOBOXTOP = obox [obox.length-1] .offsetTop+math.floor (obox [obox.length-1] .offsetHeight/2);

//console.log(lastoBoxtop);

var scrolltop = document.body.scrolltop || document.documentElement.scrolltop;

var a altura = document.body.clientHeight || document.documentElement.clientHeight;

//console.log(scrolltop);

return (lastoboxtop <scrolltop+altura)? true: false;

}

Postado com arquivo CSS

A cópia do código é a seguinte:

*{margem: 0; preenchimento: 0;}

corpo {cor de fundo: #eee;}

.contente{

Posição: relativa;

}

.caixa{

preenchimento: 15px 0 0 15px;

flutuar: esquerda;

}

.pic {

preenchimento: 10px;

borda: 1px sólido #ccc;

Box-Shadow: 0 0 5px #cccccccc;

Radio de fronteira: 5px;

Antecedentes: #ffff;

}

.pic img {

Largura: 220px;

Altura: Auto;

borda: 1px sólido #eee;

}

Postado no arquivo html

A cópia do código é a seguinte:

<! Doctype html>

<html>

<head>

<Title> JavaScript Waterfall Flow </title>

</head>

<Body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

Ok, obrigado por assistir. Eu nunca escrevi artigos de compartilhamento técnico antes. Existem muitos aspectos imprudentes que espero que você possa corrigi -los. Os pequenos novatos que aprendem o front -end dão y (^_^) y