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

Question

[Владимир Куракин]

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

Вот код - https://codepen.io/Voldemar_Kurakin/pen/yLOyrvW

Comments

[Ankhena]

Я видимо с утра не вижу где проблема.

Но главный вопрос, вы это делаете потому что учите js или это реальный проект?
Я к тому, что все это делается гридами. И ховер тоже делается на сss.

[Владимир Куракин]

А что за гриды, что вы имеете ввиду, подскажите, пожалуйста?

Answer 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()
  })

})

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

Comments

[Владимир Куракин]

У вас та же проблема (например, при изменении ширины окна браузера с 1201px на 1200px и наоборот), если изменить на 1 px всего лишь, то работает некоректно.

[Лев Забудкин]

Владимир Куракин, так сделай изначально -1px, в чём проблема?

[Лев Забудкин]

const maxHeight = sortedBlocksHeights[0] - 1