Как сделать чтобы было все плотно по высоте?

Question

[Роман]

Например, есть 9 блоков div. Все одинаковые, со свойством float: left; и width: 33%;
Получается они будут стоять вот так:

Но так будет если высота всех блоков одинаковая, но если не одинаковая, получается хаос:

А нужно чтобы вот так:

Comments

[Nikolay Talanov]

css-live.ru/tricks/zadacha-plotnoj-upakovki-blokov.html - советую глянуть

Answer 1

[Алексей Зуев]

mosaicflow
shapeshift
пример с masonry

Если без js, то

<div class="container">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  ...
</div>

.container {
  column-count: N;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.container img {
  display: inline-block;
  width: 100%, 
}

column-gap - расстояние между колонками

Для правильного порядка в колонках формируем примерно такой вывод

for (var i = 0; i < N; i++) {
    for (var j = i; j < images.length; j+=N) {
      <img src="images[j].src"

, где N - количество колонок.

Еще есть возможность создать подобное используя flexbox
Раз
Два
Три

Но там не так всё хорошо иногда получается, как задумывается. Хотя у любого способа есть свои недостатки. Так что пробуйте разные варианты, может что-то и будет золотой серединой.

Answer 2

[_ _]

Вариант без js - делаете 3 одинаковые колонки, складываете в них дивы.
Вариант с js - берете masonry, izotope, blocksit, whatever и go code.

Comments

[Роман]

как тогда например выводить с базы данные по очереди в каждую колонку?)

[_ _]

Роман Бьете на три части и выводите, в чем проблема? Вот если бы они у вас были разные по ширине при этом, то тут только js