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

I want to display a page of thumbnails. The thumbnails are user uploaded artwork images. Each image has a constrained 开发者_JS百科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:

How do I eliminate the gaps?

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/

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.