Блоки равной высоты на jQuery

В процессе работы столкнулся с интересной задачкой. Нужно было выровнять несколько блоков по одной высоте, но с разными входными данными. Понятно, что CSS тут не поможет, поэтому пришлось написать функцию на jQuery, которая решает эту задачу.

Сложность была в том, что нужно выровнять 4 блока в одном контейнере, а потом по этой высоте выровнять еще 2 блока. Изначальная высота блоков не известна, поэтому приходится, что называется, плясать от печки. Вот скриншот, чтобы было понятно (кликабельно):

Результатом решения стала функция на jQuery:

 

Опишу входные параметры:

  • blocks — селекторы блоков, которые нужно выровнять
  • etalon — высота блока, с которым нужно сравнивать результат
  • correction — значение коррекции, при сложной верстке можно простым подбором подогнать нужное значение, может получать отрицательное значение

Примеры вызова функции:

Если данное решение вам понравилось, интересно узнать ваше мнение или критику.

  • Встречал подобное в некоторых «журнальных» wp-темах.
    Спасибо, мб пригодится.

  • Пригодился уже, спасибо

  • Андрей

    >>Понятно, что CSS тут не поможет, поэтому пришлось написать функцию на jQuery, которая решает эту задачу.

    а табличка, не?..

  • Руслан

    Слишком много лишнего кода, вот написал плагин.

    [js]
    $.fn.equalHeight = function () {
    var max = Math.max.apply(this, this.map(function() {
    return $(this).innerHeight();
    }));

    return this.each(function () {
    $(this).height(max — parseFloat($(this).css(‘paddingTop’)) — parseFloat($(this).css(‘paddingBottom’)));
    });
    }
    [/js]

  • надо взять на вооружение, спасибо