How do I dynamically create a collage (grid with no gaps) of images, where images have different heights?

R

2

8

I want to display a page of thumbnails. The thumbnails are user uploaded artwork images. Each image has a constrained width, but not a constrained height, this is to show the full image without any cropping.

I want the images to butt up against each other with no gaps in between. The number of columns is not fixed: If I expand or resize the page the images should flow into correct number of columns.

float:left

is ALMOST, what I want. Except when there are tall images in the page I get this gapped look:

enter image description here

How do I eliminate the gaps?

Rankin answered 30/6, 2011 at 21:4 Comment(2)

You could define 4 distinct tables (each with one column) in a row :) – Weekender 30/6, 2011 at 21:14

To get the look that you want, you're going to have to use absolute positioning. You can either write your own script or use a plugin like the one suggested. – Philipines 30/6, 2011 at 21:29

A

6

If you want to do this in css only you have to create divs for every column, and float those columns (but it messes up order of images).

Alternatively, you can use jquery plugin like this one.

Ashla answered 30/6, 2011 at 21:18 Comment(2)

thanks. the masonry plugin does what I want. Except that I would have preferred the original order to go left to right down each row. Masonry does this for the first row, but for the 2nd row it seems to arbitrarily fit the next image in order up into the biggest gap it can find. Though generally you stil get the order to be first ones "near" the top, but not necessarily from left to right. – Rankin 1/7, 2011 at 17:37

A possibility to avoid messing up the images is having a counter, for every fourth image you post it in the certain div. So you have this counter and a while statement going 1,2,3 and 4.... when the number hits 1, you add to div 1, and so on, and when it hits 4, you simply add the number back to 0 :) Problem solved! – Woodhouse 8/3, 2014 at 21:51

C

9

Not sure how graceful you need your CSS, but a good option none the less. You could use masonry.js to help that.

http://css-tricks.com/seamless-responsive-photo-grid/

Cortex answered 25/2, 2012 at 13:20 Comment(2)

This should be the chosen answer! – Whack 16/8, 2014 at 16:32

I know you answered this a while ago, but did you ever figure out a way to display images left to right instead of top to bottom? – Suburbanite 1/3, 2016 at 18:15

A

6

If you want to do this in css only you have to create divs for every column, and float those columns (but it messes up order of images).

Alternatively, you can use jquery plugin like this one.

Ashla answered 30/6, 2011 at 21:18 Comment(2)

thanks. the masonry plugin does what I want. Except that I would have preferred the original order to go left to right down each row. Masonry does this for the first row, but for the 2nd row it seems to arbitrarily fit the next image in order up into the biggest gap it can find. Though generally you stil get the order to be first ones "near" the top, but not necessarily from left to right. – Rankin 1/7, 2011 at 17:37

A possibility to avoid messing up the images is having a counter, for every fourth image you post it in the certain div. So you have this counter and a while statement going 1,2,3 and 4.... when the number hits 1, you add to div 1, and so on, and when it hits 4, you simply add the number back to 0 :) Problem solved! – Woodhouse 8/3, 2014 at 21:51

Recommended topics

Hot tags