¿Cómo creo dinámicamente un collage (cuadrícula sin huecos) de imágenes, donde las imágenes tienen diferentes alturas?

Quiero mostrar una página de miniaturas. Las miniaturas son imágenes de obras de arte cargadas por el usuario. Cada imagen tiene un ancho limitado, pero no una altura limitada, esto es para mostrar la imagen completa sin ningún recorte.¿Cómo creo dinámicamente un collage (cuadrícula sin huecos) de imágenes, donde las imágenes tienen diferentes alturas?

Quiero que las imágenes se toquen entre sí sin espacios intermedios. El número de columnas no es fijo: si amplío o cambio el tamaño de la página, las imágenes deben fluir al número correcto de columnas.

float:left

es ALMOST, lo que quiero. Excepto cuando hay imágenes de altura en la página me sale este aspecto con huecos:

enter image description here

¿Cómo eliminar las brechas?

Fuente

2011-06-30 Homan

Se podría definir 4 mesas diferentes (cada uno con una columna) en una fila :) –

Para obtener el aspecto que desea, usted va a tener que utilizar el posicionamiento absoluto. Puedes escribir tu propio script o usar un plugin como el sugerido. – jchavannes

Si quieres hacer esto en CSS solo debes crear divs para cada columna, y flotar esas columnas (pero estropea el orden de las imágenes).

Alternativamente, puede usar el plugin jquery como this one.

Fuente

2011-06-30 21:18:06 Litek

gracias. el plugin de mampostería hace lo que quiero. Excepto que hubiera preferido que la orden original fuera de izquierda a derecha en cada fila. La albañilería hace esto para la primera fila, pero para la segunda fila parece ajustarse arbitrariamente a la siguiente imagen hasta el espacio más grande que puede encontrar. Aunque, en general, todavía tienes el orden para ser los primeros "cerca" de la parte superior, pero no necesariamente de izquierda a derecha. – Homan

Una posibilidad para evitar arruinar las imágenes es tener un contador, por cada cuarta imagen que publique en el div determinado. Así que tienes este contador y una declaración while en 1,2,3 y 4 ... cuando el número llega a 1, se agrega a div 1, y así sucesivamente, y cuando llega a 4, simplemente se agrega el número de nuevo a 0 :) ¡Problema resuelto! –

No estoy seguro de cuán elegante necesita su CSS, pero una buena opción, no obstante. Puede usar masonry.js para ayudarlo.

http://css-tricks.com/seamless-responsive-photo-grid/

Fuente

2012-02-25 13:20:48 onefastsnail

¡Esta debería ser la respuesta elegida! – vsync

Sé que usted respondió esto hace un tiempo, pero ¿alguna vez descubrió una forma de mostrar las imágenes de izquierda a derecha en lugar de arriba hacia abajo? – SISYN

¿Cómo creo dinámicamente un collage (cuadrícula sin huecos) de imágenes, donde las imágenes tienen diferentes alturas?

Respuesta

Cuestiones relacionadas