How can I get images to wrap with no vertical space?

I'm pulling images that are of the same width, but not the same height. I'm trying to display them in rows with no added vertical space.

For example, if row 1 has images that are 100px 150px and 70px high respectively, I'd want the images on t开发者_运维百科he second row to appear directly underneath each image at the respective height.

Right now, I have float set to left which works for the horizontal display. Adding a clear: left gives the desired effect but places everything in a single column. How do I get images wrapping to the left, but appearing vertically immediately below?

As things are, any images underneath the first 3 would all display at the same line height of the one beneath the 150px image with a large vertical space underneath the 100px and 70px images.

If you display them as rows, the images will line up in rows, there is nothing that you can do about that.

I think that you rather want to display them in columns, that way the images in one column won't affect the images in the other columns. Just put columns beside each other by floating them, and images inside them.

HTML:

<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>
<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>
<div class="column">
  <img ... />
  <img ... />
  <img ... />
</div>

CSS:

.column { float: left; }
.column img { display: block; }

After a bit more digging, it's a combination jQuery and CSS that makes what I was looking for possible. Specifically jQuery Masonry.

http://desandro.com/demo/masonry/docs/basic-single-column.html