Допустим, у нас имеется контейнер с товарами, а товары отличаются по высоте ввиду разной наполненности контентом или по другим причинам. Это может приводить к тому, что блоки с товарами будут ломать сетку и выглядеть некрасиво. Решить это можно костыльным велосипедом следующего вида:
<script>
/*Получаем максимальное число из массива*/
function getMaxHeight(goods) {
let heightArr = [];
goods.forEach((product) => {
heightArr.push(product.clientHeight);
});
return Math.max.apply(null, heightArr);
}
/*Получаем все карточки товара. Указываем селектор самой карточки*/
let itemNodes = document.querySelectorAll('.goods-item');
let maxHeight = getMaxHeight(itemNodes);
itemNodes.forEach((item) => {
item.style.height = maxHeight + 'px';
});
</script>