Выравнивание блоков по высоте

03 Октября 2019 00:55

Допустим, у нас имеется контейнер с товарами, а товары отличаются по высоте ввиду разной наполненности контентом или по другим причинам. Это может приводить к тому, что блоки с товарами будут ломать сетку и выглядеть некрасиво. Решить это можно костыльным велосипедом следующего вида:

<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>