css: float блоки, чтобы занять все свободное пространство

Я пытаюсь создать "мозаику изображений", состоящую в основном из изображений одинакового размера, а некоторые из них имеют двойную высоту.

Все они должны аккуратно выровняться следующим образом:

Чтобы максимально упростить автоматическую генерацию этих мозаик, я подумал, что лучшим вариантом будет плавание. К сожалению, большой блок приводит к тому, что следующие текут позади него, но не перед ним:

Что я могу сделать, помимо их ручного позиционирования, чтобы получить изображения в нужном мне месте, и при этом Легко ли автоматически создавать аналогичные макеты?

В настоящее время я использую код:

FIDDLE

HTML:

    
1.1
    
1.2
    
1.3
    
2.1
    
2.2

CSS:

.frame {
    background-color: blue;
    border: 5px solid black;
    width: 670px;
}
.img {
    width: 200px;
    height: 125px;
    background-color: white;
    border: 1px solid black;
    float: left;
    margin: 10px;
}
.h2 {
    height: 272px;
}