Déjame mostrarte las representaciones primero:
Al deslizar por la página web, la imagen se puede cargar y mostrar automáticamente.
El modelo de caja que contiene imágenes es el siguiente:
<Div> <Viv> <img src = "img/8.jpg"> </div> </div>
Establezca el ancho de IMG en 150px, luego Box_img agrega margen interno y efectos de sombra, el margen exterior de Box es 0, agregue el margen interno. El ancho de la caja se extiende por el ancho IMG y los márgenes. En otras palabras, no hay espacio entre las cajas, pero hay algunos márgenes dentro de la caja. De esta manera, al establecer la posición de JS, no tiene que considerar el problema del margen, solo llame al ancho de la caja.
Establezca la posición del DIV que contiene todos los cuadros en relativa, por lo que al establecer el valor superior o el valor izquierdo, no necesita considerar el atributo de margen más externo.
Coloque la imagen: obtenga la altura de la primera fila de la imagen y guárdela en la matriz. Establezca la posición en absoluto en la siguiente imagen, colóquela debajo de la imagen con la altura más pequeña, luego coloque arriba e izquierda, y agregue el valor mínimo de la matriz a la altura de la imagen recién colocada. En otras palabras, a excepción de la primera línea, las imágenes originales colocadas en HTML se reposicionan en JS.
Al deslizar la página hacia la parte inferior, la función del evento se activa y luego se colocan algunas imágenes para garantizar la carga infinita de las imágenes.
Archivo HTML:
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <title> </title> <link rel = "stylesheet" href = "cascada.css" type = "text/css"> <script src = "waterball.js"> </script> </shing> id = "Content"> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <vi src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <img src = "img/.jpg"> </div> <iv> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <d <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <mit <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg" src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img> <img src = "img/.jpg"> </div> <div> <img> <mitg> src="Img/.jpg"></div></div><div><div><img src="Img/.j src="Img/.jpg"></div><div><div><img src="Img/.jpg"></div><div><img src="Img/.jpg"></div><div><img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img> src = "img/.jpg"> </div> <viv> <img src = "img/.jpg"> </div> <div> <mit <img src = "img/.jpg"> </div> <div> <div> <div> <img src = "img/.jpg"> </div> </div> <div> <iMgg> src = "img/.jpg"> </div> </div> <viv> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <diMg src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <vi src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <iv> <iv> <iM) src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.jpg"> </shiv> </div> <div> <img src = "img/.jpg"> </siv> <div> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img> src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <div> <img src = "img/.jpg"> </div> <iv <mit <img 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> <div> <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <iv> <img> <iMg> src = "img/.jpg"> </div> </div> <Vis> <Miv> <IMG> <img src = "img/.jpg"> </div> </div> <ve src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <img> src = "img/.jpg"> </div> <viS> <img src = "img/.jpg"> </div> <vi src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> <div> <img src = "img/.jpg"> </div> <div> <div> <div> <img src = "img/.jpg"> </div> <viV> <viv> src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> <div> <mit <img src = "img/.jpg"> </div> </div> <div> <img src = "img/.jpg"> </div> </div> </div>
Archivo CSS:
*{margin:; padding:;} #content {posicion: relative; background-color: #;}. box {padding: px; float: left;}. box_img {padding: px; border: px sólido #cccccc; box-shadow: px #cccccccc; border-radius: px;} img {width: px: px;Archivo JS:
La función Math.floor () se puede redondear hacia abajo.
El matemático La función puede obtener el valor mínimo de la matriz de altura.
Window.onscroll = function () {}; Esta función se activa al deslizar la página.
document.documentelement.clientHeight; La altura mostrada por el navegador.
document.documentelement.scrolltop; la distancia al deslizamiento.
/*** Creado por ASUA en 2016/4/9.*/Window.onload = function () {imglocation ("contenido", "box"); var lodeImage = {"date": [{"src": "1.jpg"}, {"src": "2.jpg"}, {"src": "3.jpg"}, {"src": "4.jpg"}, {"src": "5.jpg"}, {"src": "6.jpg 6..J.." 6.Jpg {, "," srcgg ":" "src": "7.jpg"}, {"src": "8.jpg"}, {"src": "9.jpg"}, {"src": "10.jpg"},]} window.onscroll = function () {if (checkflag ()) {para (var (var i = 0; i <lodeiMage.date.length; i ++) {var box = document.createElement ("div"); box.classname = "box"; var cParent = document.getElementById ("content"); cparent.appendChild (var); 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 ("contenido", "casilla");}}} checkflag () {var cParent = document.getElementById ("content"); ccontent = getChildElement (cParent, "box"); var lastContentEight = cContent [cContent.length-1] .OffSettop; var scrollHeight = document.documentelement.scrolltop || document.body.scrolltop; var; var; var; var; var; var; var; PageHeight = document.documentelement.clientheight || document.body.clientheight; console.log (lastContentheDight+":"+scrollheight+":"+pageHeight); if (lastContentEight <scrollheight+pageHeight) {return true;}} function imglocation (parent, hijo) {var vAR) cParent = document.getElementById (parent); var ccontent = getChildElement (cParent, child); var imgwidth = cContent [0] .OffsetWidth; var cols = math.floor (document.documentelement.clientwidth/imgwidth); cparent.style.csstext = "width:"+imgwidth*cols+"px; margin: 30px auto"; var hightarr = []; for (var (var (var (var (var i = 0; i <ccontent.length; i ++) {if (i <cols) {hightarr.push (ccontent [i] .OffSetheTeTer);} else {var minheight = math.min.apply (null, tightarr); var minindex = getMinIndex (alturar, minheight); ccontent [i] .style.position = "absoluto"; ccontent [i] .style.top = minheight+"px" ; ccontent [i] .style.left = cContent [minindex] .OffSetleft+"Px"; Heightarr [minindex]+= cContent [i] .Offsetheight;}}} function getMinIndex (Heightarr, MinHeight) {for (var i = 0; i <Heightarr.Length; i ++) {if (Heightarr [i] == Minheight) {return i;}}} function getChildelement (parent, content) {var contentR = []; var allContent = parent.getElementsbyTagname ("*"); para (para (Var (var ContentARR = []; var allContent = Parent.getElementsByTagname ("*"); para (para (Var (Var ContentARR = []; var allContent = parent.getElementsByTagname ("*"); For (For (Var (Var ContentARR = []; var allContent = Parent.getElementsByTagname ("*"); For (Var (Var ContentARR = []; i = 0; i <allContent.Length; i ++) {if (allContent [i] .className == content) {contentR.push (allContent [i]);}} return contentarr;}De acuerdo, el código para el efecto de flujo de cascada que carga automáticamente las imágenes por JS se le ha presentado aquí. ¡Espero que te sea útil!