Mosaic Grid gallery with dynamic sized images

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

171798 次浏览

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.

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