Floating images with multiple sizes in CSS

I'm wanting to be able to create a banner of floating images based on what are uploaded via users. The tool needs to have images of 50x50 and 100x100. At the moment, I just want to randomly display the images and tried to apply float:left. However, as you can see below - it leaves gaps.

Is there an easy way to do this without programatically positioning the images?

If you want the code so far, it's here:

.wall {
    width: 300px;
    background-color: red;
    display: table;
}

.wall img {

    float: left;

}

and

<div class="wall">
    <img src="man1.png" alt=""/>
    <!-- ETC... !-->
</div>
开发者_运维技巧

I think you will need to write some code. The first thing that I notice is that the gaps are all fillable by a 50x50 (the smallest) image. I would try implementing the following:

1. Fill the page with 50x50 images randomly.
2. Absolutely position a few 100x100 images. These will cover 4 underlying 100x100 images.

Seems like this will work (haven't tried), but hopefully that helps.

Bob