Не работает равные высоты при обновлении данных

Question

Друзья, всем привет)

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

https://github.com/mattbanks/jQuery.equalHeights/blob/master/jquery.equalheights.min.js

Может кто-то уже решил подобную проблему? Или есть какие-нибудь хорошие идеи?)

Answer 1

Вы должны снова инициализировать equalHeights после изменения вида сетки / списка или переключения вкладок.

JQuery:

// Alternative 1: Update equalHeights when clicking the switch list/grid view button
$('.toggle-view-button-classname').on('click', function() {
  $('.items-classname').equalHeights();
})

// Alternative 2: Update equalHeights on a callback sent from the JS that updates the list/grid view
$('.event-target-classname').on('eventNameForLayoutChange', function() {
  $('.items-classname').equalHeights();
})

В качестве альтернативы вы можете использовать чистое CSS-решение с flexbox, которое позволит вам иметь элементы одинаковой высоты без какого-либо javascript или jQuery. Хотя это, вероятно, потребует дополнительного стиля.

Простое четырехстоечное решение равной высоты в CSS:

.grid {
  display: flex;
  flex-wrap: wrap;
}
.item {
  width: 25%;
}