floating images on an irregular grid.

[exsite_interactive]

Looking for a CSS or JS solution to this. I want to create a site where there are images of varying sizes, that get floated next to each other in a nice neat grid. The client will be uploading these photos, and they do have some knowledge of photoshop but im wondering if anyone has seen an elegant solution to this before. I’ve seen ti done with text before, but that is different since text can vary in size but these images can not be stretched.

Find in the link below an image of what i am trying to accomplish (blurred for confidentiality).
http://www.exsite.ca/temp/example.jpg

[TheDoc]

It’s impossible to get it perfect without doing each image manually and using absolute positioning. But you can get close with something like this:

http://digwp.com/2010/08/randomized-grid-of-posts/

[seeingsound]

There is also these: http://blog.creativityden.com/fluid-grid-using-jquery/ or Vgrid

[chendrix]

masonry.js was the first thing I thought of when reading this.

[Author]

Posts