Aligning/sorting images in HTML for different sizes

So, I have this neat thumbnail PHP class that sorts images in a nice grid, but I've found that a grid isn't always the best way to display images.

The problem I'm having is with an asortment of logotypes that should be displayed in an arbitrary sized container box. Each logotype is of a different size (i.e. the downsampled thumbnail-sized is a proportionally resized version of the logotype).

So, let's assume we want to limit the logotypes to a virtual square box of, say, 120x开发者_开发知识库120 pixels, meaning that the resulting thumbnails may consist of images that are 120x20 and 30x120 and so on. They would all be of different sizes, yet none larger than 120 pixels on the "long" side of each logotype.

Fine, now for the sorting. Do you guys have a good suggestion as to how I would print out these? I wouldn't really want to print each in a 120x120 square grid space (in fact, I can see how the virtual box might be 200x100, and thus leaning to giving more space to horizontal logotypes.

But, how would I create an algorithm (in PHP) to display these in a way where they look neatly stacked and makes the best fit? Should I just order them by vertical size and the further you get in the "list", the wider the logotypes get?

Any suggestions is greatly appreciated, and if I'm not clear about something, feel free to ask me to clarify.

I'd group and sort them first by height, packing them in groups of similar height (+-5% difference) and then by width. Each height group gets its own line.

Could look that way:

+--------------+ +-----------+ +------+
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | |           | |      |
|              | +-----------+ +------+
+--------------+

+------------------+ +-------------+ +-------------+ +-------------+ +------+ +--+ 
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | |  |
|                  | |             | |             | |             | |      | +--+ 
+------------------+ +-------------+ +-------------+ +-------------+ +------+


+--------------+ +------+
|              | +------+
+--------------+ 

Depending on the type of images, or what looks better, the widest ones come first or last in the line.