При верстке списка товаров (у интернет-магазинов или каталогов) или списка статей (у блогов), появляется необходимость выровнять высоту блоков карточек товаров или статей.
В общем случае можно обойтись свойствами CSS, но в некоторых случаях приходиться динамически рассчитывать максимальную высоту, так как заранее неизвестно высота части карточки, например, из-за длинного имени товара или статьи. Можно обойтись частью имени, а не помещающуюся часть скрыть, но что, если хочется вывести все имя.
Для этого воспользуемся следующим скриптом:
$.fn.equivalent = function (){
var $blocks = $(this); //выборка всех интересующих нас блоков
var maxH = $blocks.eq(0).height(); //высота первого блока как начального значения
// перебираем все блоки и ищем максимальную высоту
$blocks.each(function(){
if ( $(this).height() > maxH ) {
maxH = $(this).height();
}
});
//устанавливаем максимальную высоту для каждого блока
$blocks.height(maxH);
}
//пример
$('div[data-row=1]').equivalent();
Но не стоит забывать, что, если выровнять все блоки под одну высоту, у некоторых из них внутри может появиться много пустого пространства, а это не всегда красиво выглядит на странице.
З.Ы. А еще мы пишем много полезной информации в блоге Стократ. Добро пожаловать.