Как сделать чтобы было все плотно по высоте?
mosaicflowshapeshiftпример с 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РазДваТри
Но там не так всё хорошо иногда получается, как задумывается. Хотя у любого способа есть свои недостатки. Так что пробуйте разные варианты, может что-то и будет золотой серединой.
Вариант без js - делаете 3 одинаковые колонки, складываете в них дивы.
Вариант с js - берете masonry, izotope, blocksit, whatever и go code.