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

Question

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?

You could define 4 distinct tables (each with one column) in a row :) — Optillect Team, Jun 30 '11 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. — jchavannes, Jun 30 '11 at 21:29

score 9 · Answer 1 · answered Feb 25 '12 at 13:20

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/

answered Feb 25 '12 at 13:20

onefastsnail

91
1
5

This should be the chosen answer! – vsync Aug 16 '14 at 16:32
1

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? – SISYN Mar 01 '16 at 18:15

score 6 · Accepted Answer · answered Jun 30 '11 at 21:18

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.

answered Jun 30 '11 at 21:18

Litek

4,888
1
24
28

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. – Homan Jul 01 '11 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! – Mar 08 '14 at 21:51

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

2 Answers2

Linked