Como não há servidor, eu uso uma string json como a fonte do carregamento de dados da imagem ao puxar para baixo
html:
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "js/cetfall.js"> </script> <estilo "" text/css "> *{ } .pin {preenchimento: 15px 0 0 15px; flutuar: esquerda; } .Box {Padding: 10px; borda: 1px sólido #ccc; Box-Shadow: 0 0 6px #ccc; Radio de fronteira: 5px; } .Box img {Width: 162px; Altura: Auto; } </style> </ad> <body> <div id = "main"> <div> <div> <img src = "./ imagens/1.jpg"/> </div> </div> <div> <img src = "./ imagens/2.jpg"/> </div> </div) <img src = "./ Images/4.jpg"/> </div> </div> <div> <img src = "./ Images/4.jpg"/> </div> </div> <div> <img src = "./ imagens/5.jpg"/> </div> </div> <iMg = "/ imagens/5.jpg "/> </div> <div> <img src = "./ Images/7.jpg"/> </div> </div> <div> <img src = "./ Images/8.jpg"/> </div> </div> <div> <img src = "./ imagens/9.jpg"/> </. </div> <div> <img src = "./ imagens/10.jpg"/> </div> </div> <div> <img src = "./ imagens/10.jpg"/> </div> </div> </div> <mg src = "./ imagens/10.jpg"/> </. </div> </div> <div> <img src = "./ Images/10.jpg"/> </div> </div> <div> <img src = "./ Images/11.jpg"/> </div> </div> <div> <mg src = "/ imagens/12.jpg "</> </> </> </> </> <// src = "./ Images/12.jpg"/> </div> </div> <div> <img src = "./ Images/13.jpg"/> </div> </div> <div> <img src = "./ imagens/14.jpg"/> </div> </div) <div> <img src = "./ imagens/16.jpg"/> </div> </div> <div> <img src = "./ imagens/16.jpg"/> </div> </div> <div> <img src = "./ imagens/14.jpg"/> </"</. </div> </div> <div> <img src = "./ Images/16.jpg"/> </div> </div> <div> <img src = "./ Images/17.jpg"/> </div> </div> </div> <img src =. src = "./ Images/18.jpg"/> </div> </div> <div> <img src = "./ Images/19.jpg"/> </div> </div> <div> <img src = "./ imagens/20.jpg"/> </div/ </div> </div> </body> </html>Jswallper.js:
window.onload = function () {Catinho ('main', 'pin'); var dataint = {'data': [{'src': '1.jpg'}, {'src': '2.jpg'}, {'src': '3.jpg'}, {'src': '4.jpg'}]}; window.onscroll = function () {if (checkScrollside ()) {var oparent = document.getElementById ('main'); // objeto pai para (var i = 0; i <dataInt.data.length; i ++) {var opinion = document.createElement ('div'); // Adicione o elemento nó opini.className = 'pin'; // Adicione o atributo de nome da classe OPARENT.APPENDCHILD (OPN); // Adicione o nó filho var obox = document.createElement ('div'); obox.className = 'Box'; Opin.AppendChild (OBOX); var oimg = document.createElement ('img'); oimg.src = './Images/'+dataInt.data [i] .src; obox.appendChild (OIMG); } cachoeira ('main', 'pin'); }; }}/* ID do pai pai PIN PIN PIN ID*/FUNCIONAÇÃO (pai, pino) {var oparent = document.getElementById (pai); // objeto pai var apin = getClassObj (oparente, pino); // obtenha a matriz de bloqueio de armazenamento Apin var ipinw = apin [0] .fsetwidth; num = math.floor (document.documentElement.clientWidth/ipinw); // o número de pinos que podem ser acomodados em cada linha [largura da janela dividida por uma caixa de bloco largura] Oparent.style.csstext = 'largura:'+ipinw*num+'px; margem: 0 auto; '; // Defina o estilo de centralização pai: largura fixa + margem horizontal automática var ponter = []; // usado para armazenar as alturas de todas as caixas de bloco em cada coluna. a for (var i = 0; i <apin.length; i ++) {// transfira cada elemento da caixa de bloco da matriz apin var ponte = apin [i] .offsetHeight; if (i <num) {Pinarr [i] = PINH; // O pino da caixa de bloco Num na primeira linha é adicionado ao array Pinarr} else {var minh = Math.min.apply (null, Pinarr); // o valor mínimo na matriz Pinarr minhar minhindex = getMinHindex (Pinarr, min); Apin [i] .style.Position = 'Absolute'; // Defina o deslocamento absoluto APIN [i] .style.top = minh+'px'; Apin [i] .style.left = Apin [MINHindex] .offSetleft+'px'; // A altura do elemento mínimo alto da matriz + adiciona altura da caixa de bloco Apin [i] Pinarr [MINHindex] + = Apin [i] .offsetHeight; // Atualize a altura da coluna Após adicionar a caixa de bloco}}}/***Obtenha a matriz dos mesmos elementos infantis através da classe de classe dos pais e filhos*/funclSsobj (********, obtenha a matriz dos mesmos elementos infantis através da classe de classe dos pais e filhos*/funclas obj = parent.getElementsByTagName ('*'); // Obtenha todos os subconjuntos do pai var pins = []; // Crie uma matriz para coletar elementos filho para (var i = 0; i <obj.length; i ++) {// transf os elementos filho, julgar a categoria e pressionar a prisão se (i) (i]. }}; retorno pins;}/*****Obtenha o índice do índice de altura do pino mínimo*/função getMinhindex (arr, minh) {for (var i in arr) {if (arr [i] == minh) {return i; }}} função checkScrollside () {var oparent = document.getElementById ('main'); var apin = getClassOBJ (OPARENT, 'PIN'); var linPinh = apin [apin.length-1] .offsettop + math.floor (apin [apin.length-1] .offsetHeight/2); // Crie a altura de [acionar a caixa de blocos da função da função (): A última caixa de bloco é da parte superior da página da web + metade da altura (a carga de implementação) scrolltop = document.documentElement.scrolltop || document.body.scrolltop; // return de altura do papel (lastpinh <scrolltop+documenth)? true: false; // retorna true após atingir a altura especificada, desencadeando a função da cascata ()}}Diagrama de demonstração:
Download do código -fonte: //www.vevb.com/jiaoben/452663.html
Endereço da demonstração: http://demo.vevb.com/js/2016/jswallper/