Question

I would like to place some unknown number (normally between 3 and 9) of images or varying widths and heights on an HTML page.
The order in which the images are arranged is not particularly important.

When I simply do this with css float and clear:none etc, the results are often sub-optimal, resulting in large white-space areas that are not filled up.

Is there some algorithm and way to control the packing of the collection of images to minimize white-space or otherwise non-appealing looks?

If I had a nice algorithm, I guess I could arrange the images using javascript+css after loading the html page and the images.

Thanks,

Answer 1

If you’re not averse to using jQuery, the Masonry plugin will do exactly what it sounds like you’re describing.

Masonry is a dynamic grid layout plugin for jQuery. Think of it as the flip-side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

http://masonry.desandro.com/