Почему неправильно отрабатывает событие 'resize'?

Я написал скрипт, задача которого состоит в том, чтобы осуществлять автоматический подсчёт высот блоков, выбирая в дальнейшем самое большое из полученных значений. То есть:
1) Есть 6 блоков, количество контента в каждом из них разное.
2) Нужно присвоить каждому из этих блоков 'height: auto'.
3) Выбрать из этих блоков самый высокий.
4) Присвоить всем остальным блокам высоту этого самого высокого блока.
Скрипт должен работать и при изменении размеров окна браузера (естественно расположение контента в блоках при этом тоже меняется). Здесь как раз и возникает проблема: скрипт работает некорректно (например, при изменении ширины окна браузера с 1201px на 1200px и наоборот). Помогите, пожалуйста, это исправить. Спасибо!

Вот код - https://codepen.io/Voldemar_Kurakin/pen/yLOyrvW
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 1
@t800zippygod
document.addEventListener('DOMContentLoaded', () => {

  function setBlocksHeight() {
    const blocksArr = [...document.querySelectorAll('.block')]

    blocksArr.forEach(block => {
      block.style.height = 'auto'
    });

    const currentBlocksHeights = blocksArr.map(block => block.offsetHeight)
    const sortedBlocksHeights = currentBlocksHeights.sort((h2, h1) => h1 - h2)
    
    const maxHeight = sortedBlocksHeights[0]
    blocksArr.forEach(block => {
      block.style.height = maxHeight + 'px'
    });
  }

  setBlocksHeight()
  window.addEventListener('resize', () => {
    setBlocksHeight()
  })

})


Чел, не стал разбираться досколнально в твоем коде. Но на коленке накидал такую реализацию, у меня работает. Посмотри на алгоритм, мб где-то какая-то ошибка.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы