CSS / JS: элементы плавающего блока разной высоты?

Question

Вот с чем я работаю.

Как видите, у меня есть много блочных элементов, которые я хочу поместить в пять столбцов.

Однако, поскольку они имеют разную высоту, они не очень хорошо реагируют на то, что их плывут. (Отсюда огромная дыра в середине страницы.)

Я знаю, что видел обходной путь JS, который вычислял высоты и размещал элементы там, где они подходят, но я не могу найти его сейчас - кто-нибудь это помнит или у кого-то есть другие идеи ? ;)

Answer 1

Может быть, вам нужно: http://desandro.com/resources/jquery-masonry/

Это настраивается.

Answer 2

Если вы не возражаете, что каждый элемент имеет ту же высоту, что и самый высокий, попробуйте эту функцию (jquery):

function evenHeights(element) {
    var x = 0;
    $(element).each(function(){
        var h = $(this).height();
        if (h > x) x = h;
    });

    $(element).each(function() {
        var thumbHeight = x;
        $(this).height(thumbHeight);
    });
}

и вызовите evenHeights($(".bloggpost")); в вашем $(document).ready(function()

Answer 3

Если вы не против полагаться на JS для правильной компоновки, почему бы не настроить пять <div> элементов, таких как столбцы, каждый из которых имеет определенную ширину (вы можете дать им класс HTML, а затем установить их ширинудинамически, если вы выберете)?Вы можете суммировать высоту элементов блока, а затем использовать JS, чтобы указать, сколько нужно поместить в каждый столбец <div>.Это может работать динамически на событии onresize.Код будет очень легко написать, особенно если вы используете jQuery.

Answer 4

Вы можете исправить ситуацию, просто поместив блок для каждых 5 плавающих элементов в стиле clear:both

пример:

<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<div style='clear:both'></div>