Отзывчивый JQuery Равная высота на пару

У меня есть эта разметка:

<div class="wrapper">
    <article>A</article>
    <article>B</article>
    <article>C</article>
    <article>D</article>
    <article>E</article>
    <article>F</article>
    <article>G</article>
    <article>H</article>
</div>

который всплывает и формирует список из двух столбцов. Каждая статья имеет переменную высоту из-за ее содержания.

Я хочу, чтобы каждая пара имела одинаковую высоту в зависимости от того, какая из них имеет самую высокую высоту. Я нашел варианты плагина равных высот, но все они выдают равные высоты всем элементам. Мне просто нужно, чтобы каждая пара была одинаковой высоты, а не все элементы. Это возможно, или есть какой-нибудь существующий плагин для этого?

Примечание. Невозможно изменить разметку статьи, поскольку она выводится CMS.

Мой ожидаемый результат:

|-------|---------|
|   A   |    B    |
|-------|---------|
|       |         |
|   C   |    D    |
|       |         |
|       |         |
|       |         |
|-------|---------|
|       |         |
|   E   |    F    |
|       |         |
|-------|---------|
Источник

4 ответа

Решение

Я нашел решение для этого без изменения разметки: http://css-tricks.com/equal-height-blocks-in-rows/

Источник

Вот небольшой код, который установит высоту на максимальную высоту, разделив блок статей по количеству столбцов, а не любым другим структурным методом.

Демо: http://jsfiddle.net/bgWaw/

var articles = $('.wrapper article');

var columns = 2;

var cIndex = 0;
while (cIndex < articles.size()) {
    var cMaxHeight = 0;
    for (cColumn = 0; cColumn < columns; cColumn++) {
        var cArticle = articles.eq(cIndex + cColumn);
        if (cArticle.size() > 0) {
            cMaxHeight = (cArticle.height() > cMaxHeight ? cArticle.height() : cMaxHeight);
        }
    }

    articles.slice(cIndex, cIndex + columns).height(cMaxHeight);

    cIndex += columns;
}

Это может быть легко превращено в плагин, если это необходимо. Просто вопрос о том, чтобы сделать его функцией в $.fn объект и использование this вместо статей и передачи в столбцах в качестве параметра функции.

Демонстрационная версия плагина jQuery: http://jsfiddle.net/bgWaw/2/

$.fn.maxSliceHeight = function(columns) {
    var cIndex = 0;
    while (cIndex < this.size()) {
        var cMaxHeight = 0;
        for (cColumn = 0; cColumn < columns; cColumn++) {
            var cElem = this.eq(cIndex + cColumn);
            if (cElem.size() > 0) {
                cMaxHeight = (cElem.height() > cMaxHeight ? cElem.height() : cMaxHeight);
            }
        }

        this.slice(cIndex, cIndex + columns).height(cMaxHeight);

        cIndex += columns;
    }

    return this;
}

Пример вызова:

$('.wrapper article').maxSliceHeight(2);
Источник

Вопреки моему комментарию, здесь есть еще один метод, который вы можете использовать:

Преврати эту разметку в строки:

<div class="row">
    <article>A</article>
    <article>B</article>
</div>
<div class="row">
    <article>C</article>
    <article>D</article>
</div>
<div class="row">
    <article>E</article>
    <article>F</article>
</div>

Плавать <article> элементы, но убедитесь, что каждый .row Div имеет clear: both в CSS.

Таким образом, каждая "строка" будет иметь одинаковую высоту, и в ней будет содержаться самое высокое содержание.

Источник

Разделение на divs является хорошим решением, если вы действительно хотите всегда иметь два столбца, но я предполагаю, что вы можете изменить его на три столбца, если браузер достаточно широк. Вы смотрели на изотоп? http://isotope.metafizzy.co/

Источник
Другие вопросы по тегам