Deixe -me mostrar as renderizações primeiro:
Ao deslizar pela página da web, a imagem pode ser carregada e exibida automaticamente.
O modelo de caixa que segura imagens é o seguinte:
<div> <div> <img src = "img/8.jpg"> </div> </div>
Defina a largura IMG a 150px, então Box_IMG adiciona margem interna e efeitos de sombra, a margem externa da caixa é 0, adicione a margem interna. A largura da caixa é esticada por largura img e margens. Em outras palavras, não há espaçamento entre as caixas, mas há algumas margens dentro da caixa. Dessa forma, ao definir a posição do JS, você não precisa considerar o problema da margem, basta chamar a largura da caixa.
Defina a posição da div, que mantém todas as caixas em relação, portanto, ao definir o valor superior ou o valor esquerdo, você não precisa considerar o atributo de margem mais externa.
Coloque a imagem: obtenha a altura da primeira linha da imagem e guarde -a na matriz. Defina a posição como absoluta na próxima foto, coloque -a abaixo da imagem com a menor altura, depois defina a parte superior e a esquerda e adicione o valor mínimo da matriz à altura da imagem recém -colocada. Em outras palavras, exceto pela primeira linha, as imagens originais colocadas no HTML são reposicionadas em JS.
Ao deslizar a página para o fundo, a função de evento é acionada e, em seguida, são colocadas algumas imagens para garantir o carregamento infinito das imagens.
Arquivo HTML:
<! Doctype html> <html> <head lang = "pt"> <meta charset = "utf-"> <title> </title> <link rel = "stylesheet" href = "cetfall.css" type = "text/css"> <script src = "cetfall.js"> id = "content"> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img sg = "img/.jpg"> </div> <d>> <img src = "img/.jpg"> </div> <d> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <iv> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </divg src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <d> <mg src = "img/.jpg"> </div> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <divg src = "img/.jpg"> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <mg> <img src = "img/.jpg"> </div> </div> <div> <mg> <iMg src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg "> </div> <div> <div> <img src =" img/.jpg "> </div> <d> <Img src =" img/.jpg "> </div> <d> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <d> <mg src = "img/.jpg"> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <d> <mg src = "img/.jpg"> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <mg src = "img/.jpg"> </div> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <divg src = "img/.jpg"> </ src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "iMg/.jpg"> </</div> <div> <mg src = "img/.jpg"> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <d> <mg src = "img/.jpg"> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <divg src = "img/.jpg"> </ src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <divg src = "img/.jpg"> </ src = "img/.jpg"> </div> </div> <div> <mg> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.j src =" img/.jpg "> </div = <div/" src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <d> <mg src = "img/.jpg"> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <mg src = "img/.jpg"> </div> <d> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </. src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "iMg/.jpg"> </</div> <div> <mg sc src = "img/.
Arquivo CSS:
*{margin:; encadear:;} #content {position: relativo; colorido de fundo: #;}. Caixa {preenchimento: px; float: esquerd;}. box_img {preenchimento: px; borda: px-radius #ccccc; box-shadow: px #ccccc; border px px px;Arquivo JS:
A função Math.Floor () pode ser arredondada para baixo.
O Math.Min.Apply (NULL, Hightarr); A função pode obter o valor mínimo da matriz altura.
window.onscroll = function () {}; Esta função é acionada ao deslizar a página.
document.documentElement.clientHeight; A altura exibida pelo navegador.
document.documentElement.scrolltop; a distância para deslizar.
/*** Criado por ASUA em 2016/4/9. lodeImage = {"date": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, "}," src ". "src": "7.jpg"}, {"src": "8.jpg"}, {"src": "9.jpg"}, {"src": "10.jpg"},]} window.onscroll = function () {if (checkflag ()) {para (var i = 0; i <lodeImage.date.length; i ++) {var box = document.createElement ("div"); box.className = "box"; var cparent = document.getElementById ("content"); cparent.appendchild (caixa); var box_img = document.createElement ("div"); box_img.classname = "box_img"; box.appendchild (box_img); var img = document.createElement ("img"); img.src = "img/"+lodeImage.date [i] .src; box_img.appendChild (img);} imglocation ("content", "caixa");}}} function "); ccontent = getChildElement (cparent, "caixa"); var lastContentHeight = cContent [cContent.Length-1] .OffSetTop; var scrolHeight = document.documentElement.scrolltop || document.body.scrolloTop; var PageHeight = document.documentElement.clientHeight || document.body.clientHeight; console.log (LastContentHeight+":"+scrolHeight+":"+pageHeight); if (lastContetHeight <ScrolHeight+PageHeight) {return;}}}} imgletId (Child) {vars) {varen; ccontent = getChildElement (cparent, criança); var imgwidth = ccontent [0] .offsetWidth; var cols = math.floor (document.documentElement.clientwidth/imgwidthth); colsyle.csStext = "widthth:"+imgwidth); altura = []; para (var i = 0; i <ccontent.length; i ++) {if (i <cols) {heightarr.push (ccontent [i] .offSethEight);} else {var mineight = math.min.min.apply (null, altura); var minindex = getminindex (heightarr, minheight); ccontent [i] .style.position = "absoluta"; ccontent [i] .style.top = minheight+"px" ; ccontent [i] .style.left = ccontent [minindex] .offsetleft+"px"; heightarr [minindex]+= ccontent [i] .offSethEight;}}} função getminindex (heightarr, minheight) {for (var i = 0; i <heightarr.length; i ++) {if (heightarr [i] == minheight) {return i;}}} função getChildElement (parent, content) {var contentarr = []; i = 0; i <allContent.Length; i ++) {if (allContent [i] .className == Content) {contentarr.push (allContent [i]);}} retornar contentarr;}Ok, o código para o efeito de fluxo em cascata que carrega automaticamente as imagens do JS foi introduzido aqui. Espero que seja útil para você!