82

I have just received the following design for a project, for an image grid gallery, with dynamic width & height images (user submitted images). (Screenshot at the end of post)

I have tried jQuery Masonry, Tympanus Automatic Image Montage and CSS-Tricks Seemless Responsive Photo Grid, but each has their limitation.

  • Jquery Masonry allows for both width and height to be dynamic, however there are gaps generated
  • The latter 2 scripts, generate very nice grids, but with the problem that either width or height must be static

EDIT: i came across, Isotope, which is almost perfect and i will probably end up using it, unless there's something that fixes my needs exactly. Therefore my question still remains the same...

Is there any javascript (preferably jQuery) script that can generate a completely dynamic mosaic (in respect to image size), like the one in the screenshot below?

Thanks for any help

Gallery

Dogoku
  • 4,585
  • 3
  • 24
  • 34
  • Thanks that looks like its what I need. Can you please add this as an answer so I can properly give you credit and mark the question as answered? – Dogoku Jul 24 '12 at 18:10
  • @Dogoku Could you share how do you make simultaneosly height and width dynamic in Isotope? – Mark Vital Oct 21 '12 at 05:34
  • Warning: the Tympanus Automatic Image Montage link is a buggy piece of garbage. – shipshape Oct 13 '13 at 20:14
  • You can user [unitegallery](http://unitegallery.net/index.php?page=tiles-justified-various). It is responsive and has various options available like link, icon, lightbox etc. – RN Kushwaha May 31 '16 at 11:15
  • I want the same output as the image above. The images are of different sizes but at the end don't want any gaps. Freewall metro style grid is not working out for me since all are images. please help! – monisha Sep 19 '17 at 07:50

2 Answers2

66

I suggest Freewall. It is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile, and tablet.

Oleg
  • 7,070
  • 4
  • 47
  • 49
2

I think you can try "Google Grid Gallery", it based on aforementioned Masonry with some additions, like styles and viewer.

askhat
  • 59
  • 2
  • 19