Выравнивание блоков по высоте с помощью JS

Думаю у каждого, хотя бы раз, при верстке, была ситуация, когда необходимо сравнять по высоте блоки. Да, конечно, с помощью CSS все это легко реализуется… Но как не странно, не всем подходит вариант выравнивания блоков с помощью CSS, по разным причинам, ну например ситуация, такая «нестандартная», или принципы не позволяют, а возможно и религия не допускает… Шучу конечно 🙂

На самом деле есть такие ситуации, когда нет возможности так сгенерировать код, чтобы можно было использовать CSS в полную меру. Но лично я попал в такую ситуацию, когда мне надо сравнять по высоте 2 или более блоков, расположеных в разных частях страницы, и их внешне ни чего не может связывать. Тут и задумываешься о JavaScript. О чем и пойдет речь.

Подгоняем высоту всех блоков
Допустим у нас 3 блока? присвоим им одинаковый класс

<div class="col-height">1</div>
<div class="col-height">2</div>
<div class="col-height">3</div>

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

$(document).ready(setTimeout(function(){
    $.fn.equivalent = function (){
        var $blocks = $(this),
            maxH    = $blocks.eq(0).height(); 

        $blocks.each(function(){
            maxH = ( $(this).height() > maxH ) ? $(this).height() : maxH;
        });

        $blocks.height(maxH); 
    }
}, 10));

И запускаем наш скрипт

$('.col-height').equivalent();

Несколько вариантов блоков
Теперь давайте усложним. Допустим, у нас несколько вариантов блоков, которые нам надо сравнять. Например раметка может выглядить так

<div class="col-height-1">1</div>
<div class="col-height-1">2</div>
<div class="col-height-2">3</div>
<div class="col-height-2">4</div>

Можно конечно запустить функцию 2 раза ))

$('.col-height-1').equivalent();
$('.col-height-2').equivalent();

Но, вдруг у нас не известно сколько будет вариантов блоков, может 2, 3, 4 … 20
Тогда такой вариант нам не подходит. Можно найти все необходимые варианты, а потом уже запускать функцию, как-то так…

var arr = document.body.innerHTML.match(RegExp('col-height-([0-9]+)', 'g'));

arr.forEach(function(item, i, arr) {
    $('.'+item).equivalent();
});

Выравнивание блоков зависимо от устройства
Усложним еще больше. Вдруг не всегда надо выравнивать блоки? Что если Вы используете bootstrap, и страница адаптирована под устройства. Тут может выравнивание быть лишним, если смотреть на страницу через телефон. Лишние не логичные отступы и т.п.

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

<div class="col-height-xs-1">1</div>
<div class="col-height-xs-1">2</div>
<div class="col-height-md-2">3</div>
<div class="col-height-md-2">4</div>

тогда первая группа блоков, должна выравниваться для всех устройств, а вторая группа, будет выравниваться для устройств с экраном более 992px

Как Вы уже поняли, принцип тот же что и у bootstrap

    var Width = document.body.clientWidth;
  
    if (Width >= 1200) {
      var type = 'xsmdlg';
    } else if (Width >= 992) {
      var type = 'xsmd';
    } else if (Width >= 768) {
      var type = 'xsm';
    } else if (Width < 768) {
      var type = 'xs';
    }
    
    var arr = document.body.innerHTML.match(RegExp('col-height-(['+type+']+)-([0-9]+)', 'g'));

    arr.forEach(function(item, i, arr) {
      $('.'+item).equivalent();
    });

Задача выполнена! Хотя есть свои недоработки, но при желании можно и допилить… Например можно сделать постоянную проверку на размер экрана, чтобы при изменении размера браузера, изменения вступали в силу.

До новых заметок! )