2012-06-07 19 views
77

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

He intentado jQuery Masonry, Tympanus Automatic Image Montage y CSS-Tricks Seemless Responsive Photo Grid, pero cada uno tiene su limitación.

  • Jquery Albañilería permite tanto la anchura y la altura a ser dinámico, sin embargo hay lagunas generan
  • Estas últimas 2 guiones, generan muy agradable rejillas, pero con el problema de que o bien la anchura o la altura debe ser estática

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

¿Existe alguna secuencia de comandos javascript (preferiblemente jQuery) que pueda generar un mosaico completamente dinámico (con respecto al tamaño de la imagen), como el de la siguiente captura de pantalla?

Gracias por cualquier ayuda


Gallery

+0

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

+0

Saludos, acabo de hacer. – Systembolaget

+0

@Dogoku ¿Podría compartir cómo hace simultaneamente alto y ancho dinámico en Isótopo? –

Respuesta

59

que sugieren Freewall. Es un complemento jQuery multiproveedor y receptivo que te ayuda a crear muchos tipos de diseños de cuadrícula: diseños flexibles, diseños de imágenes, diseños de cuadrículas anidados, diseños de estilo metropolitano, diseños tipo pinterest ... con bonitos efectos de animación CSS3 y eventos de devolución de llamada. Freewall es una solución todo en uno para crear diseños dinámicos de cuadrículas para computadoras de escritorio, dispositivos móviles y tabletas.

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

+12

Estudiar esto: podría ser útil http://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery – mayankcpdixit

+0

@mayankcpdixit esto es extremadamente útil, gracias – zavr

+1

tnx @zavr Hice algo mío https://github.com/mayankcpdixit/grid-no-white – mayankcpdixit

Cuestiones relacionadas