Galería de cuadrícula de mosaico con imágenes de tamaño dinámico [cerrado]


80

Acabo de recibir el siguiente diseño para un proyecto, para una galería de cuadrícula de imágenes, con imágenes dinámicas de ancho y alto (imágenes enviadas por el usuario). (Captura de pantalla al final de la publicación)

He probado jQuery Masonry , Tympanus Automatic Image Montage y CSS-Tricks Seemless Responsive Photo Grid , pero cada uno tiene sus limitaciones.

  • Jquery Masonry permite que tanto el ancho como el alto sean dinámicos, sin embargo, se generan espacios
  • Los últimos 2 scripts generan cuadrículas muy agradables, pero con el problema de que el ancho o el alto deben ser estáticos

EDITAR: me encontré con Isotope , que es casi perfecto y probablemente terminaré usándolo, a menos que haya algo que solucione mis necesidades exactamente. Por lo tanto, mi pregunta sigue siendo la misma ...

¿Existe algún script javascript (preferiblemente jQuery) que pueda generar un mosaico completamente dinámico (con respecto al tamaño de la imagen), como el de la captura de pantalla a continuación?

Gracias por cualquier ayuda


Galería


Gracias, parece que es lo que necesito. ¿Puede agregar esto como respuesta para que pueda darle crédito y marcar la pregunta como respondida?
Dogoku

@Dogoku ¿Podrías compartir cómo se hace que la altura y el ancho sean dinámicos simultáneamente en Isotope?
Mark Vital

Advertencia: el enlace de Montaje automático de imágenes de Tympanus es una basura con errores.
shiphape


Quiero el mismo resultado que la imagen de arriba. Las imágenes son de diferentes tamaños pero al final no quieren espacios. La cuadrícula de estilo metro de Freewall no me está funcionando, ya que todas son imágenes. ¡por favor ayuda!
monisha

Respuestas:


64

Sugiero Freewall. Es un plugin de jQuery adaptable y entre navegadores que le ayuda a crear muchos tipos de diseños de cuadrícula: diseños flexibles, diseños de imágenes, diseños de cuadrícula anidados, diseños de estilo metro, diseños tipo pinterest ... con agradables efectos de animación CSS3 y eventos de devolución de llamada. Freewall es una solución todo en uno para crear diseños de cuadrícula dinámicos para computadoras de escritorio, dispositivos móviles y tabletas.

Página de inicio y documento: también se encuentra here.


12
Estudiar esto: podría ser útil crispymtn.com/stories/…
mayankcpdixit

@mayankcpdixit esto es extremadamente útil, gracias
zavr


@mayankcpdixit, genial, bien hecho. También hice el mío propio, como complemento jQuery.
zavr

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.