Menu icon Foundation
Creating Auto Adjusting Image Layout

Trying to make an image layout like:
https://www.google.com/search?site=&tbm=isch&source=hp&biw=1359&bih=1318&q=food&oq=food&gs_l=img.3..0l10.4988.6418.0.6599.4.4.0.0.0.0.94.304.4.4.0....0...1ac.1.32.img..0.4.303.yr_9RJy4vwc

100+ images all max ht 125px, aspect ratio kept. I'm asking how to display both left and right image align like images.google?

Auto place N# of images per row depending on width also? Each row could be diff # of images dependent on images widths.

imagesRowsgrid

Trying to make an image layout like:
https://www.google.com/search?site=&tbm=isch&source=hp&biw=1359&bih=1318&q=food&oq=food&gs_l=img.3..0l10.4988.6418.0.6599.4.4.0.0.0.0.94.304.4.4.0....0...1ac.1.32.img..0.4.303.yr_9RJy4vwc

100+ images all max ht 125px, aspect ratio kept. I'm asking how to display both left and right image align like images.google?

Auto place N# of images per row depending on width also? Each row could be diff # of images dependent on images widths.

Ed Charbeneau over 5 years ago

I would look at this post, it should give you some ideas: http://blog.vjeux.com/2012/image/image-layout-algorithm-google-plus.html

Ed Charbeneau over 5 years ago

Sorry there's no edit button, but I wanted to add another resource I had in my bookmarks: http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/

Glenn Ford over 5 years ago

I found Isotope http://isotope.metafizzy.co/ and Masrony http://masonry.desandro.com/ .

I was interested in doing more a css version. Not sure how possible.

Rafi Benkual over 5 years ago

Ya, we have used http://masonry.desandro.com/

It seemed to do just this.

Glenn Ford over 5 years ago

Sorry there's no edit button, but I wanted to add another resource I had in my bookmarks: http://www.techbits.de/2011/10/25/building-a-google-plus-inspired-image-gallery/

I ended up using this. Works great! Thanks!