Как заставить элементы HTML заполнить вертикальное пустое пространство

Question

Я хочу иметь веб-страницу, состоящую из ящиков (элементов div) с информацией, которая заполняет весь экран. Это JSFiddle показывает мою проблему, красную коробку (номер 3) необходимо, чтобы двигаться вверх и заполнить пустое пространство:

https://jsfiddle.net/whug4kL1/

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

http://www.zergnet.com/

Когда я проверить исходный код выше веб-сайта, они используют position: absolute на коробках и имеют top и left жёстко. Когда вы имеете дело с динамическими данными, как вы можете узнать количество пикселей для использования для top и left заранее?

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

Answer 1

Вы должны использовать плагин как Isotope или Masonry