Css float элементы с неравными высотами слева и вверх в сетке

Мне интересно, как я могу добиться эффекта на рисунке 1.

То, что у меня есть до сих пор, это

.box { display: inline-block; vertical-align: top; width: 100px;}

Это дает мне результат, проиллюстрированный на рисунке 2. (Обратите внимание: я знаю, что могу выполнить то же самое с float: left)

Мой код HTML выглядит примерно так:

<span class="box">A<br><br><br><br></span>
<span class="box">B<br></span>
<span class="box">C<br><br><br></span>
<span class="box">D<br><br><br></span>
<span class="box">E<br><br><br><br><br><br></span>
<span class="box">F</span>
<span class="box">G<br><br><br><br></span>
<span class="box">H<br></span>
<span class="box">I<br><br></span>

Я хочу, чтобы каждый элемент плавал влево, насколько это возможно, но тем временем плавал вверх.

Можно ли сделать это с помощью чистого css, или мне нужен javascript?

EDIT:

Для меня важно, чтобы вся сетка была расположена в центре страницы. Поэтому я использую display: inline-block. Сетка также не должна фиксироваться на странице, потому что я хочу, чтобы она перепланировалась при изменении размера моего окна.

Ответ 1

Вы можете использовать популярную библиотеку Masonry.

Плагин динамической компоновки для jQuery Флип-сторона CSS-плакатов

Вот код пример...

$('#container').masonry({
  itemSelector: '.box'
});

Вот источник на Github и интервью с Дэвидом Десандро в подкасте Shoptalk.

Для людей, которые не используют jQuery, обратите внимание, что там также Vanilla Masonry, которая является бесплатной версией.

Совет: Убедитесь, что родительский контейнер имеет позицию: относительный, поэтому все содержимое привязано к вашему контейнеру.

Ответ 2

Поскольку вы уже используете jquery, jquery masonry может вас заинтересовать: http://masonry.desandro.com

Ответ 3

Ну, если вы только ориентируетесь на поддержку самого современного браузера, CSS3 многоколоночный макет может помочь. Одна из проблем с этим подходом заключается в том, что он не будет поддерживать один и тот же порядок, но вы можете играть с порядком в HTML (или Javascript).

Я добавил контейнер вокруг ваших пробелов под названием #container.

#container { 
    -webkit-column-width: 100px; 
    -moz-column-width: 100px; 
    column-width: 100px; 
}

jsFiddle Demo