更新数据时

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