Imágenes absolutamente posicionadas - Sin superposición

Estoy usando mampostería JS para posicionar absolutamente las imágenes en una página, y estoy usando algo de JS para darle a cada imagen un margen superior aleatorio y un margen izquierdo para dar el efecto de espaciado aleatorio, etc. Sin embargo, algunas de las imágenes se superponen. ¿Hay alguna manera de evitar que esto suceda?

Puedes ver el resultado actual aquí: http://richgc.com/freelance/staton/exhibitions-installations/

Gracias, R

preguntado el 12 de junio de 12 a las 21:06

Dado que está cargando las imágenes de forma diferida, debe forzar un relevo en la mampostería cada vez que se carga una nueva imagen. De lo contrario, distribuirá los elementos según el lado de su marcador de posición. -

Podrías usar $(this).prev().height() y agrega las imagenes anteriores height en la ecuación; es posible que descubra que también necesita tomar su margin-top en el cálculo también. -

@bfavaretto Ah, ¿entonces esto no sucedería si no usara lazyload? -

1 Respuestas

Gracias a la sugerencia de @bfavaretto, el problema era que la mampostería y la carga diferida no van de la mano, así que agregué una devolución de llamada a la mampostería para recargar cada vez que se desplaza.

$(window).scroll(function () {
setTimeout(function(){
    $container.masonry();
}, 0);

});

El único problema es que apuesto a que la carga en la página es mega ahora, por lo que cualquier mejora es bienvenida.

Gracias.

Respondido el 12 de junio de 12 a las 22:06

Aunque esto agrega algunos errores cuando llega al final de la página. ¿Alguna sugerencia? - Juan el pintor

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.