Как сделать адаптивные блоки по вертикали

#html #css #html5 #css3 #bootstrap

Есть блоки у меня они:

Хотелось бы сделать подобие:


Есть ли какой-то способ это сделать я использую Bootstrap.
    

Ответы

Ответ 1

Вероятно, придётся воспользоваться padding'ом вместо margin'а из-за проблемы с #7,
но примерно так:



div {
  margin: 0 0 1em;
  background: silver;
  counter-increment: i;
  
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside:avoid;
  -moz-page-break-inside:avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
}

body {
  -moz-column-count: 4;
  column-count: 4;
  counter-reset: i 0;
}

div:before {
  content: "#" counter(i) " - " attr(style);
}












Ответ 2

Есть ещё вариант со скриптом:



$(function() {
  $('.flexboxes').masonry({
    itemSelector: 'div' // обращаемся к пунктам
  });
});
.flexboxes {
  display: flex;
}

.flexboxes > div {
  width: 100px;
  margin: 5px;
  background: silver;
}




  
0
  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9



Ответ 3

1) Каждая колонка будет отдельным циклом;
2) Использовать абсолютное позиционирование, к примеру, как на Pinterest сделано.