Как добиться макета плитки div с динамическими высотами, не используя абсолютное позиционирование?

Question

Мне интересно посмотреть, как можно выполнить запрос WordPress для создания макета, такого как этот, когда вы захватываете сообщения:

http://planetpropaganda.com/#!/blog

Как видите, ящики имеют разную высоту (в основном из-за разной длины выдержки).

То, что они сделали, выглядит великолепно, однако, поскольку ящики абсолютно расположены, я не думаю, что это хорошо работает с адаптивным макетом.

У кого-нибудь есть подсказка?

Answer 1

Правда, чтобы этот макет был отзывчивым, вы должны использовать JS, чтобы переместить их.Подобно Pinterest, эти «плитки» - просто братья и сестры.

Однако вы можете использовать многостолбцовый подход .проблема в том, что вам нужен алгоритм для равномерного распределения столбцов между столбцами.Pinterest сходит с рук с помощью элементов с абсолютным позиционированием.

для этого вам нужно либо сделать это на стороне сервера (но не знать, как долго контент, чтобы вы могли получить несбалансированные столбцы), либо выполнить некоторые безумные манипуляции с DOM (вы знаете размеры, но работа в DOM идет медленно)

<ul>
    <li class="a3">content</li>
    <li class="a3">content</li>
    <li class="a2">content</li>
    <li class="a1">content</li>
    <li class="a3">content</li>
</ul>
<ul>
    <li class="a1">content</li>
    <li class="a2">content</li>
    <li class="a1">content</li>
    <li class="a3">content</li>
    <li class="a2">content</li>
</ul>

ul{
    float:left;
    width:250px;
}
li{
    background:#ccc;
    margin: 0 20px 20px 0;
}
/*let's simulate varying content height*/
.a1{
    height:150px;
}
.a2{
    height:300px;
}
.a3{
    height:450px;
}

Answer 2

Этот макет называется Dynamic Grid Layout, который (возможно) впервые реализован Pinterest.Люди всегда называют id "Layout-подобным Grid Layout".У меня есть ссылка, которая дает хорошее представление о «Pinterest-подобной сетке», которая может помочь вам понять.

И Введение в Pinterest-как динамическую сетку

и если вы используете jQuery, вы можете рассмотреть список, который есть по этой ссылке.Здесь перечислены 5 плагинов jQuery.

5 плагинов jQuery для создания макета динамической сетки типа Pinterest

Если вы хотите получить другие ресурсы о том, как создать этот макет,начните гуглить "Pinterest-как Grid Layout", вы найдете свой путь.

Answer 3

Пожалуй, самая популярная библиотека для этого. Также лицензия MIT, поэтому ее можно использовать без ограничений. Документация для него намного лучше любой из альтернатив, которые я видел.

http://masonry.desandro.com/

Answer 4

Коробки Pinterest также расположены абсолютно, и они прекрасно работают для них. Они получают огромное количество посещений каждый день.