Dado que no hay servidor, uso una cadena JSON como fuente de la carga de datos de imagen al extraer hacia abajo
HTML:
<! DOCTYPE HTML> <html> <HEAD> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script src = "js/waterfall.js"> </script <script type = "text/css"> *{almohd } .pin {relleno: 15px 0 0 15px; flotante: izquierda; } .Box {Padding: 10px; borde: 1px sólido #ccc; shadow de caja: 0 0 6px #ccc; Border-Radius: 5px; } .box img {ancho: 162px; Altura: Auto; } </style> </head> <body> <div id = "main"> <div> <div> <img src = "./ imágenes/1.jpg"/> </div> </div> <div> <img src = "./ images/2.jpg"/> </div> </div> <div> <iMg src = "./ imágenes/3.jpg"/> <<</Div> <Div> <Div> <Div> <img src = "./ imágenes/4.jpg"/> </div> </div> <div> <img src = "./ images/4.jpg"/> </div> </div> <div> <img src = "./ imágenes/5.jpg"/> </div> </div> <div> <div> <img src = "./ imágenes/6.jpg"/" <div> <img src = "./ imágenes/7.jpg"/> </div> </div> <div> <img src = "./ imágenes/8.jpg"/> </div> </div> <div> <img src = "./ images/9.jpg"/> </div> </div> <div> <img src = "./ imágenes/9.jpg//> <//</DivIns. </div> <viv> <img src = "./ Images/10.jpg"/> </div> </div> <viv> <mit <img src = "./ Images/10.jpg"/> </div> </div> <viv> <img src = "./ imágenes/10.jpg"/> </div> </div> <viv> <img src = ".//10.jpg"/10.jpg " </div> </div> <div> <img src = "./ imágenes/10.jpg"/> </div> </div> <viv> <img src = "./ Images/11.jpg"/> </div> </div> <div> <div> <img src = "./ imágenes/12.jpg"/> </div> </div> <iMggg = <img src = "./ imágenes/12.jpg"/> </div> </div> <iMggg = <img src = "./ Images/12.jpg"/> </iv> </div> <iMG src = "./ imágenes/12.jpg"/> </div> </div> <viv> <mit <img src = "./ imágenes/13.jpg"/> </div> </div> <viv> <img src = "./ imágenes/14.jpg"/> </div> <Viv> <img src = "./ Images/16.jpg"/> </div> </div> <div> <img src = "./ Images/16.jpg"/> </div> </div> <div> <iMg src = "./ Images/14.jpg"/> </div> </div> <viv> <img ssc = "./ 15.jpg"/> </div> </div> <viv> <img ssc = "./ 15.jpg"/> </div> </div> <viv> <img ssc = "./ 15.jpg"/> </div> </div> <div> <img ssc = "./ 15.jpg"/> </div> </div> <viv> <img ssc = "./ 15.jpg"/> </div> </div> <div> <img sest </div> </div> <viv> <img src = "./ imágenes/16.jpg"/> </div> </div> <div> <img src = "./ images/17.jpg"/> </div> </div> <div> <div> <img src = "./ imágenes/18.jpg"/> </div> <biv> <div <iMg> src = "./ imágenes/18.jpg"/> </div> </div> <viv> <mit <img src = "./ imágenes/19.jpg"/> </div> </div> <viv> <img src = "./ images/20.jpg"/> </div> <biv> <div> <diM> </div> </div> </body> </html>Jswallper.js:
window.onload = function () {cascada ('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 principal para (var i = 0; i <dataint.data.length; i ++) {var Opin = document.createelement ('div'); // Agregar nodo de elemento Opin.ClassName = 'pin'; // Agregar atributo de nombre de clase Oparent.AppendChild (Opin); // Agregar nodo infantil var obox = document.createElement ('div'); obox.classname = 'box'; Opin.appendChild (OBOX); var oimg = document.createElement ('img'); oimg.src = './imágenes/'+dataint.data [i] .src; OBOX.AppendChild (OIMG); } cascada ('principal', 'pin'); }; }}/* ID de padre ID de padre Pin elemento ID*/function Waterfall (parent, pin) {var oparent = document.getElementById (parent); // Objeto parent num = math.floor (document.documentelement.clientwidth/ipinw); // El número de pines que se pueden acomodar en cada fila [ancho de ventana dividido por un ancho de cuadro de bloque] oparent.style.csstext = 'ancho:'+ipinw*num+'px; margen: 0 auto; '; // Establezca el estilo de centrado principal: ancho fijo + margen horizontal automático var pinharr = []; // Se usa para almacenar las alturas de todas las cuadros de bloque en cada columna. a for (var i = 0; i <apin.length; i ++) {// transfiere cada elemento de cuadro de bloque de la matriz apin var pinh = apin [i] .OffsetheTight; if (i <num) {pinharr [i] = pinh; // El pin de cuadro de bloque num en la primera fila se agrega a la matriz pinharr} else {var minh = math.min.apply (null, pinharr); // El valor mínimo en la matriz pinharr minh var minhindex = getminhindex (Pinharr, minh); apin [i] .style.position = 'Absolute'; // Establezca el desplazamiento absoluto apin [i] .style.top = minh+'px'; apin [i] .style.left = apin [minhindex] .Offsetleft+'px'; // La altura del elemento alto mínimo de la matriz + Agregar apin [i] cuadro de bloque altura pinharr [minhindex] + = apin [i] .OffSetheTight; // Actualice la altura de la columna después de agregar el cuadro de bloque}}}/**Obtener la matriz de los mismos elementos infantiles a través de las clases de clases de los elementos parentales e infantiles*/función de la función GetClassobj (parent, className) {Varicé obj = parent.getElementsBytagName ('*'); // Obtenga todos los subconjuntos de los vars de los padres = []; // Cree una matriz para recolectar elementos infantiles para (var i = 0; i <obj.length; i ++) {// transf los elementos del niño, juzgar la categoría y presionar en el array if (obj [i] .classname == classname) Pins.push (obj [i]); }}; Pins de retorno;}/*****Obtenga el índice del índice mínimo de altura del pin*/function getminhindex (arr, minh) {for (var i en arr) {if (arr [i] == minh) {return i; }}} function checkScrollside () {var oparent = document.getElementById ('main'); var apin = getClassObj (oparent, 'pin'); var lastpinh = apin [apin.length-1] .offsettop + math.floor (apin [apin.length-1] .OffsetheTeight/2); // Cree la altura de [activar la función de la función de cuadro de bloque ()] scrolltop = document.documentelement.scrolltop || document.body.scrolltop; // return de altura de papel (lastpinh <scrolltop+documenth)? verdadero: falso; // return true después de alcanzar la altura especificada, activando la función de cascada ()}Diagrama de demostración:
Descargar el código fuente: //www.vevb.com/jiaoben/452663.html
Dirección de demostración: http://demo.vevb.com/js/2016/jswallper/