Функция нахождения элемента с наибольшей высотой в JavaScript

Иногда бывает нужно расположить несколько блоков на странице так, чтобы они имели одинаковую высоту. Это может быть тяжело, если вы не знаете, как это сделать. Но не стоит беспокоиться, ведь в JavaScript существует функция, которая может вам помочь.

Функция setEqualHeight находит div.elem с наибольшей высотой и присваивает эту высоту остальным блокам div.elem. Кроме того, эта функция срабатывает как при загрузке страницы, так и при изменении размеров страницы. Таким образом, вы можете быть уверены, что высота блоков будет всегда одинаковой.

Код функции

// Функция для выравнивания высоты блоков
function setEqualHeight() {
  var maxHeight = 0; // переменная для хранения максимальной высоты
  var elements = document.querySelectorAll('.elem'); // массив элементов с классом 'elem'
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.height = 'auto'; // сбрасываем высоту каждого элемента
    if (elements[i].offsetHeight > maxHeight) { // проверяем, является ли высота элемента максимальной
      maxHeight = elements[i].offsetHeight; // обновляем значение максимальной высоты
    }
  }
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.height = maxHeight + 'px'; // устанавливаем высоту каждого элемента равной максимальной высоте
  }
}

// Добавляем обработчики событий 'load' и 'resize' для окна браузера
window.addEventListener("load", setEqualHeight); // хапуск при полной загрузке страницы
window.addEventListener("resize", setEqualHeight); /// запуск при изменении размеров страницы

Описание функции

Как уже упоминалось, функция setEqualHeight проходится по всем элементам с классом elem с помощью метода document.querySelectorAll('.elem'). Затем она сбрасывает высоту всех элементов с помощью свойства style.height = 'auto', чтобы убедиться, что все блоки вертикально выравнены.

Функция находит максимальную высоту элемента, перебирая все элементы и сравнивая их высоту с переменной maxHeight. Если высота очередного элемента больше, чем текущая максимальная высота, то переменная maxHeight обновляется.

Затем функция присваивает новую высоту всем элементам с классом elem, используя цикл for. Новая высота задается в пикселях и равна максимальной высоте, найденной ранее.

Функция добавляет обработчики событий load и resize для окна браузера, чтобы она срабатывала как при загрузке страницы, так и при изменении размеров страницы. Это особенно важно, если вы хотите, чтобы блоки оставались одинаковой высоты при изменении размеров окна браузера.

Эта функция может быть использована для создания красивых и симметричных макетов веб-страниц. Например, вы можете использовать ее для расположения блоков с описанием товаров на странице интернет-магазина или для создания сетки изображений на фотогалерее.