javascript - 列表中等高的项目

Question

我希望列表中的所有元素都具有相同的高度。为此，我正在使用

jquery.matchHeigh插件。但是，所选项目不会自动更新

调整屏幕大小时：

我希望自动更新尺寸，但我只有在更新时才会得到这个结果

页：

我正在使用基本功能：

$('.product-info .product-name').matchHeight({ property: 'min-height' });

完整的代码在这里。欢迎任何帮助！

PS：我使用Owl Carousel作为列表。

Answer 1

这里的问题似乎只是窗口调整大小和实际window.resize事件触发之间的滞后时间问题。通过将事件包装在窗口调整大小并添加轻微超时，我设法解决了这个问题：

var lagTime = 500;   //Play around with this number
$(window).on("resize", function() {
    setTimeout(function() {
    $('.product-info .product-name').matchHeight({
        property: 'min-height'
    })}
    , lagTime);
}).trigger("resize");

请注意，我还在.trigger()它的末尾添加了一个，它会resize在页面加载时触发一次事件。

---

考虑lagTime根据需要减少变量，你应该能够摆脱比500我在这个例子中使用的更低的东西。

Answer 2

在你的 CSS 中使用 flexbox 是一种选择吗？如果是这样，添加display: flex;到父元素和所有子元素的高度将相等。您将需要使用嵌套在需要position: absolute;等内部的子元素，但这可以通过 CSS 完成，而无需修改 HTML 标记。

我在这里有一个更简化的 codepen 演示：https ://codepen.io/anon/pen/wjyVyZ

Answer 3

我再次阅读了 jquery.matchHeigh 插件文档并找到了这篇文章。结合Santi的回答，我相信我达到了预期的结果：

// the original group of .product-info .product-name
$('.product-info .product-name').matchHeight({ property: 'min-height' });

// on rezise event
$(window).on("resize", function() {

  setTimeout(function() {

  // remove the old group
  $('.product-info .product-name').matchHeight({ remove: true });

  // apply matchHeight on the new selection, which includes the new element
  $('.product-info .product-name').matchHeight();

  }, 250);

})

在此处查看最终代码。谢谢你们！