javascript - 更新数据时不工作 equalHeights

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

或者，您可以使用带有 flexbox 的纯 CSS 解决方案，这将允许您在没有任何 javascript 或 jQuery 的情况下拥有相同高度的项目。虽然这可能需要额外的样式。

CSS中简单的四列等高解决方案：

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