列表中的等高项目

Question

我希望列表中的所有元素高度相等。为此，我使用了 jquery.matchHeigh 插件。但是，所选项目不会自动更新

调整屏幕大小时：

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

页数：

我正在使用基本功能：

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

完整代码为here.

我正在使用 Owl Carousel 作为列表。

Answer 1

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

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 标记。

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

Answer 3

我阅读了jquery.matchHeigh plugin documentation again and found this article. Combining with the answer from 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);

})

查看最终代码 here。谢谢大家！

列表中的等高项目

Equal height items in a list

html

javascript

css

jquery

height