Отзывчивая макет неровной высоты

Question

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

Чтобы кратко подвести итог конструкции, имеются 3 столбца контейнеров, в которых контейнеры имеют неровные (динамически сгенерированные) высоты, но одинаковые (текучие) ширины. Они должны быть выложены так, чтобы они находились в числовой последовательности, идущей слева направо; то есть 1-2-3 в верхней строке, затем 4-5-6 во втором ряду и так далее.

Теперь, что действительно разрушает мой орешек, он пытается сделать эту линию аккуратно без большого количества лишних «вертикальных интервалов» между контейнерами. Я создал следующий код макетом (также доступен как JSFiddle ниже кодовых блоков) для иллюстрации:

HTML

<div class="wrapper" id="wrapper"> 
    <div class="container small" id="container_1">1</div> 
    <div class="container large" id="container_2">2</div> 
    <div class="container small" id="container_3">3</div> 
    <div class="container medium" id="container_4">4</div> 
    <div class="container small" id="container_5">5</div> 
    <div class="container medium" id="container_6">6</div> 
    <div class="container large" id="container_7">7</div> 
    <div class="container medium" id="container_8">8</div> 
    <div class="container large" id="container_9">9</div> 
    <div class="clearfix"></div> 
</div> 

CSS

.wrapper { 
    width: 100%; 
    padding: 5%; 
} 
.clearfix { 
    clear: both; 
} 
.container { 
    display: block; 
    float: left; 
    width: 25%; 
    margin: 2.5%; 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase; 
} 
.small { 
    height: 100px; 
    background: red; 
} 
.medium { 
    height: 150px; 
    background: green; 
} 
.large { 
    height: 200px; 
    background: blue; 
} 

JSFiddle : http://jsfiddle.net/tzikas/MYgNx/

Примечание: поскольку сама компоновка столбцов в конечном итоге будет ak до двух/одного столбца (ов), основанного на ширине устройства, я включил простую кнопку «Toggle layout» в JSFiddle, чтобы подражать этому.

То, что я хотел бы помочь выяснить, заключается в следующем:

1. Как избавиться от чрезмерного вертикального расстояния между ними, на например, «1» и «5» или «2» и " 6" ?
2. Как я могу получить «4» в положение себя ниже «1» вместо «3» (в то же время решая предыдущий пункт)?

Предпочтительно я хочу, чтобы решить эту проблему без манипулирования DOM через любого рода сценарии, но если я должен тогда Mootools мой «предпочли яд.

Answer 1

В соответствии с вашими требованиями. Вы можете использовать http://masonry.desandro.com/ для этого