Este artigo usa o código JS puro para escrever um efeito da página da Web de fluxo de cascata, implementando inicialmente um layout básico de fluxo em cascata e simular dados do Ajax carregando uma nova função de imagem após rolar para o fundo.
deficiência:
1. O programa não responde e não pode ajustar a largura da página em tempo real;
2. Quando as imagens de dados de simulação de Ajax são adicionadas ao programa, todas as imagens em toda a página são reposicionadas uma vez.
3. O programa aguarda que todas as fotos sejam carregadas antes de ler o tamanho da imagem. De fato, isso definitivamente não é possível.
4. Em projetos reais, o programa de fundo deve fornecer o valor do tamanho da imagem e usar diretamente o atributo de largura da imagem no código JS.
Ideias para este programa:
Estrutura HTML:
<body> <div id = "contêiner"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <div> <img src = "img/2.jpg"/> </div> </div> ... </div> </body> </body>
1. Inicialize o layout
1. Defina #Container como Posição: Parente;
2. Defina .Box para flutuar: esquerda;
3. Posicione todas as imagens após o carregamento da página da web;
3.1 A largura da imagem é fixa. Calcule o número de imagens que podem ser acomodadas por cada linha da página atual e obtenha a largura do #Container e defina a página para o centro;
3.2 Varregar todas as imagens, o layout de flutuação padrão das primeiras imagens Num é como a primeira linha e a matriz BoxHeightRarr = [];
3.3 Após a conclusão do layout da primeira linha, organize a próxima foto e atualize o BoxHeightarr []:
3.3.1 Coloque a próxima figura abaixo da imagem mais curta da primeira linha (posição: absoluta), ou seja, a coluna com a menor altura no BoxHeightarr [] e registre o valor do índice dos seguintes números: minindex;
3.3.2 Atualize o menor valor em BoxHeightRarr [] (BoxHeightRarr [minindex]+a altura da imagem atual);
3.4 Repita o ciclo 3,3 etapas até que todas as imagens sejam organizadas
2. Monitoramento em tempo real da altura de rolagem, se novos dados devem ser carregados
1. Após a conclusão da inicialização, obtenha a altura da última imagem de cima: LastContentHeight
2. Use Window.Onscroll = function () {...}
O monitoramento em tempo real da altura de rolagem da página atual é: Scrolltop
O monitoramento em tempo real da altura da janela atual da página é: Página
3. Quando a página monitora: LastContentHeight <ScrollTop + PageHeight, use Ajax para obter os dados JSON da imagem recém -adicionada.
3. Adicione novo conteúdo na parte inferior da página
1. Use um loop para criar um novo recipiente de imagem primeiro, adicione -o à parte inferior e, em seguida, escreva os dados de imagem correspondentes, como caminhos nos dados JSON ao contêiner para concluir a adição da imagem.
2. Depois que todas as novas imagens são adicionadas, reexecione a operação de inicialização da etapa 1 para todas as imagens e layouts de toda a página.
Pasta do projeto:
index.html: parte pré-placa dos dados da imagem
<! Doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" type = "text/css" href = "css/style.css"/> <script src = js/aplicativo.js "> </script> id = "contêiner"> <div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "img/2.jpg"/> </div> </div> <div> <img src = "img/3 </div> </div> <div> <img src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> </div> </div> <div> <img src = "img/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </div> <div> <miv> <img src = "img/10.jpg" <// src = "img/1.jpg"/> </div> </div> <div> <img src = "img/1.jpg"/> </div> </div> <div> <img src = "iMg/2.jpg"/> </> </div> <div> <IMG Src = IMG/3.J 3.J/3.j "jpg"/</div> <div> <iv> <mg src/2.jpg "/> </> </div> <div> <mg src = iMg/3.J" src = "img/4.jpg"/> </div> </div> <div> <img src = "img/5.jpg"/> </div> </div> <div> <img src = "iMg/5.jpg"/> </div> <div> <div> <mg src/5.jpg "/> </div> <div> <iv> <mg src = iMg/60 src = "img/6.jpg"/> </div> </div> <div> <img src = "img/6.jpg"/> </div> </div> <div> <img src = "iMg/6.jpg"/> </div> <div> <div> <mg src = 66.j "jpg"/</div> <div> <div> <iMg Src/6.jpg "/> </div> <div> <div> <mg src/66.n 6.J.J/6.Jpg/iMg/ src="img/6.jpg"/> </div> </div> </div> <div> <div> <img src="img/7.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/8.jpg"/> </div> </div> <div> <img src="img/9.jpg"/> </div> </div> <div> <img src="img/10.jpg"/> </div> </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/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/7.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/8.jpg"/> </div> </div> <div> <img src = "img/9.jpg"/> </div> </. <div> <img src="img/9.jpg"/> </div> </div> <div> <div> <img src="img/9.jpg"/> </div> </div> <div> <div> <img src="img/10.jpg"/> </div> </div> </div> </body></html>
style.css:
*{margem: 0; preenchimento: 0;}#contêiner {position: relativo;}. Caixa {preenchimento: 5px; float: esquerda;}. box_img {preenchimento: 5px; borda: 1px sólido #ccc; Box-Shadow: 0 0 5px #ccc; Radio de fronteira: 5px;}. box_img img {width: 150px; Altura: Auto;}App.js:
window.onload = function () {imglocation ("contêiner", "caixa"); // ajax dados simulados 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 "}, {" sr "sr": "src": "6.jpg": "5.jpg",}, "src": "6.jpg"}, {"sr": "src": "src": "5.jpg", {"src": "6.jpg"}, {"sr": "src": "src": "5.jpg", {"src": "6.jpg"}, {"sr" sr ":" src ":" src ":" 5.jpg ", {" src ":" 6.jpg "},) window.onscroll = function () {if (checkflag ()) {// julgue se novos dados devem ser carregados na parte inferior var cparent = document.getElementById ("contêiner"); // carrega dados AJAX na 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 os dados da imagem quando o imglocation ("contêiner", "caixa"); }}}; função checkflag () {var cparent = document.getElementById ("contêiner"); var ccontent = getChildElement (cparent, "caixa"); // Obtenha a altura da última imagem a partir da parte superior, altura de rolagem, altura da janela 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 (LastContentHeight+":"+scrolltop+":"+pageHeight); if (lastContentHeight <scrolltop + pageHeight) {return true; }} função imglocation (pai, conteúdo) {// pegue todos os conteúdos sob o pai do var cparent = document.getElementById (pai); var ccontent = getChildElement (cparent, content); // corrige o número de figuras por linha de acordo com a largura da janela atual do navegador e a corrige, Center var iMgwidth = cContent [0] .offsetWidth; // offsetWidth = Width + Padding + Border var num = Math.floor (document.documentElement.clientWidth /imgwidth); cparent.style.csStext = "Width:"+imgwidth*num+"px; margem: 0 auto"; // alert ("pausa"); // Defina uma matriz para hospedar as informações da imagem da primeira linha var boxHeightarr = []; for (var i = 0; i <ccontent.length; i ++) {if (i <num) {// grava a altura da imagem na primeira linha BoxHeightRarr [i] = cContent [i] .offsetHeight; // Quando os dados do AJAX são carregados, o programa reposiciona todas as imagens, para que a imagem na primeira linha deve ser limpa posição: Ccontent absoluto [i] .style.position = "static"; } else {var minheight = Math.min.apply (null, boxheightarr); var minindex = getMinhightLocation (BoxHeightRarr, MINHEight); // Coloque a figura abaixo do menor valor de índice da primeira linha CContent [i] .style.position = "Absolute"; ccontent [i] .style.top = minheight+"px"; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; // Depois que a imagem for colocada, atualize a "altura mínima da primeira linha de informações da imagem", // use o loop for para repetir essa ação até a extremidade BoxHeightarr [minindex] = BoxHeightRarr [minindex] + ccontent [i] .offSethEight; }};} // Obtenha o valor do índice com a menor altura da primeira linha da imagem getMinhEightLocation (BoxHeightRarr, MINHEight) {for (var i in boxHeightr) {if (boxHeightRarr [i] == minheight) {return i; }}} // Obtenha toda a caixa de caixa getChildElement (pai, conteúdo) {contentArr = parent.getElementsByclassName (content); Retornar contentarr;}Imagem de reprodução:
O exposto acima é tudo sobre este artigo, espero que seja útil para todos aprenderem a programação de JavaScript.