Как выравнивать элементы по высоте при изменении размера окна браузера?

Question

[egereva]

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

Есть карточки продуктов с классом product__item.
Пытаюсь выровнять их по высоте.
Использую следующую функцию:

$(document).ready(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);
}

$('.product__item').equivalent();
})
При загрузке страницы все корректно работает.

Подскажите, пожалуйста, как сделать так, чтобы в дальнейшем высота элементов пересчитывалась и при каждом изменении размера окна браузера?

Comments

[Ihor Gevorkyan]

Есть событие у window - resize, которое Вы можете слушать и вызывать перерисовку. Но я не понимаю зачем вообще делать выравнивание с помощью js / jquery, если это можно сделать css и не заниматься костылянием.

Answer 1

[Stalker_RED]

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

$(window).on('resize', myResizer);
$(document).on('ready', myResizer);
function myResizer(){
 // ...
}

Comments

[egereva]

Извините, если задаю глупый вопрос, посмотрите, пожалуйста:

так это должно выглядеть?

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

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

$blocks.height(maxH);
};

$('.product__item').equivalent();
};

$(document).on('ready', myResizer);
$(window).on('resize', myResizer);

при обновлении страницы высота пересчитывается, а при изменении размера браузера - нет. что я не так делаю?

[Stalker_RED]

egereva: Соберите пример на jsfiddle или codepen, или хотя-бы отформатируйте код, невозможно же прочесть.

И не стоит объявлять $.fn.equivalent каждый раз.

[egereva]

Stalker_RED: спасибо! разобралась)