jQuery как выровнять блоки по высоте?

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

В этой статье мы создадим функцию для выравнивания группы блоков по максимальной высоте одного из них,  чтобы каждый блок имел одинаковое значение высоты.
Для примера я буду использовать 4 вертикальных списка со ссылками. Количество элементов в этих списках будет разным, соответственно и высота этих блоков будет разной.
 

Вот как выглядят наши блоки, без применения jQuery:

eqv_blocks_nojs

 

Для того чтобы выровнять блоки, нам необходимо:

1. Найти высоту самого высокого блока.
2. Установить найденное значение всем блокам.

 
В результате получился вот такой jQuery код:
 

$(document).ready(function(){
    $.fn.equivalent = function (){
            //запишем значение jQuery выборки к которой будет применена эта функция в локальную переменную $blocks
        var $blocks = $(this),
            //примем за максимальную высоту - высоту первого блока в выборке и запишем ее в переменную maxH
            maxH    = $blocks.eq(0).height(); 

        //делаем сравнение высоты каждого блока с максимальной
        $blocks.each(function(){
            maxH = ( $(this).height() > maxH ) ? $(this).height() : maxH;
            /*
            Этот блок можно записать так:
            if ( $(this).height() > maxH ) {
                maxH = $(this).height();
            }
            */
        });

        //устанавливаем найденное максимальное значение высоты для каждого блока jQuery выборки
        $blocks.height(maxH); 
    }

    //применяем нашу функцию в элементам jQuery выборки - $('.nav')
    $('.nav').equivalent(); 
});

 

В результате выполнение написанной функции у нас выровнялись все блоки:
eqv_blocks

Вот ссылка на демо-пример и код примера:
 

Если у вас остались вопросы, пишите их в комментариях к посту :)

Нужен САЙТ? Заказуй у меня - Жми сюда! Нужен хостинг или домен? Жми сюда! Хочешь создать интернет-магазин? Жми сюда! (Shopify)

Делясь ссылкой на пост в социальных сетях - Вы помогаете развитию блога! Спасибо ;)

(5 голосов. Рейтинг: 5,00 из 5)
Loading...Loading...

Рубрика: Как сделать?

Комментарии (15)

| RSS комментария

  1. Спасибо большое,

    с первого раза получилось.

    А за пример компактного написания, отдельное спасибо

    • Дмитрий Британ:

      Спасибо за добрый комментарий :)
      Заходите еще!
      Если есть вопросы по другим темам пишите на
      ask (собачка) webcomplex.com.ua
      постараюсь ответить!

  2. magl88:

    Ну наконец-то я нашел его ! Такой нужный скрипт.
    ОГРОМНОЕ Спасибо, вы мой спаситель !

  3. Sevasan:

    Можно ли использовать этот скрипт для выравнивания вложенных блоков? Т. е. если бы в данном примере перед каждым списком был блок с фото и нужно было бы выровнять по высоте только эти блоки, а списки оставить разной высоты.

  4. Алексей:

    Добрый а как сделать, чтобы функция срабатывала при изменении ширины экрана?
    например используя
    jQuery(window).load(function(){
    ?
    });
    jQuery(window).resize(function () {
    ?
    });
    не силен в jquery, спасибо

    • Дмитрий Британ:

      Вы можете вызвать эту функцию вот так, сразу для двух событий:
      $(window).on(‘load resize’, function () { //ваша функция });
      или вот так
      $(window).on(«resize», function () { //ваша функция }).resize();

  5. Дякую!!! Шикарне рішення, одразу усе вийшло. За чистоту коду та компактність окрема вдячність!

  6. Сергей:

    Помогите пожалуйста! у меня блоки находятся в слайдере и он их соответсвенно клонирует , а так как мы задаем максимальную высоту по первому блоку то выходит полная ерунда ((((((( Можно сделать так что бы максимальная ввысота отслеживалась по блокам изначально ??? Заранее огромное спасибо )))))))))

  7. Сергей:

    Нашел свою ошибку!!! у меня были наружные отступы которые этот скрипт не считал, поэтому получалась ерунда!! вот как решил свою проблему:
    $.fn.equivalent = function (){
    var $blocks = $(this),
    maxH = $blocks.eq(0).outerHeight(true);
    $blocks.each(function(){
    maxH = ( $(this).outerHeight() > maxH ) ? $(this).outerHeight() : maxH;
    });
    $blocks.outerHeight(maxH);
    }
    $(‘.block’).equivalent();

  8. Привет, спасибо за это компактное и элегантное решение, использовал что-бы поправить стандартную бутстраповскую карусель.
    Отдельное огромное спасибо за большую красную кнопку!!!

Оставьте свой комментарий