2012-06-07 5 views
77

Je viens de recevoir la conception suivante pour un projet, pour une galerie de grille d'images, avec une largeur dynamique & images de hauteur (images soumises par l'utilisateur). (Capture d'écran à la fin de la publication)Galerie Mosaic Grid avec des images de taille dynamique

J'ai essayé jQuery Masonry, Tympanus Automatic Image Montage et CSS-Tricks Seemless Responsive Photo Grid, mais chacun a ses limites.

  • Jquery maçonnerie permet à la fois la largeur et la hauteur pour être dynamique, mais il y a des lacunes générées
  • Les 2 derniers scripts, génèrent des grilles très bien, mais le problème que la largeur ou la hauteur doit être statique

EDIT: Je suis tombé sur Isotope, ce qui est presque parfait et je vais probablement finir par l'utiliser, à moins qu'il y ait quelque chose qui corrige exactement mes besoins. Donc ma question reste toujours la même ...

Y a-t-il un script javascript (de préférence jQuery) qui peut générer une mosaïque complètement dynamique (par rapport à la taille de l'image), comme celle de la capture d'écran ci-dessous?

Merci pour toute aide


Gallery

+0

Merci qui ressemble à ce dont j'ai besoin. Pouvez-vous s'il vous plaît ajouter ceci comme une réponse afin que je puisse vous donner correctement crédit et marquer la question comme réponse? – Dogoku

+0

Cheers, juste fait. – Systembolaget

+0

@Dogoku Pourriez-vous partager comment faire de la hauteur et de la largeur simultanées en Isotope? –

Répondre

59

je suggère Freewall. Il s'agit d'un plugin jQuery réactif et multi-navigateurs pour vous aider à créer de nombreux types de mises en page: mises en page flexibles, mises en page d'images, mises en forme de grilles imbriquées, mises en page de style métro, pinterest like layouts. Freewall est une solution tout-en-un pour créer des mises en page de grille dynamiques pour les ordinateurs de bureau, mobiles et tablettes.

Page d'accueil et document: également trouvé here.

+12

Étudier ceci: pourrait être utile http://www.crispymtn.com/stories/the-algorithm-for-a-perfectly-balanced-photo-gallery – mayankcpdixit

+0

@mayankcpdixit ceci est extrêmement utile, merci – zavr

+1

tnx @zavr j'ai fait quelque chose de la mienne. https://github.com/mayankcpdixit/grid-no-white – mayankcpdixit

1

Je pense que vous pouvez essayer "Google Grid Gallery", il basé sur la maçonnerie ci-dessus avec quelques ajouts, comme les styles et la visionneuse.

Questions connexes