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

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%;
}