Question

我使用bootstrap并且我在div中有一些缩略图，我想动态调整大小以获得相同的高度。我在stackoverflow上发现了两个脚本：

    function equalHeight(group) {    
    var tallest = 0;    
    group.each(function() {       
        var thisHeight = $(this).height();       
        if(thisHeight > tallest) {          
            tallest = thisHeight;       
        }    
    });    
    group.each(function() { $(this).height(tallest); });
 } 

  $(document).ready(function() {   
    equalHeight($(".equalize")); 
  });

选项2 （bootply example）

 $(document).ready(function() {
    var maxHeight = 0;          
    $(".equalize").each(function(){
      if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });         
    $(".equalize").height(maxHeight);
  });

但两者都没能完全解决我的问题。如果您调整窗口大小（通过断点以使包含缩略图的列宽更改），内容将从缩略图中溢出。您可以在我的bootply示例中测试它。

我想我需要添加一个像window.onresize之类的EventHandler，但我还没有能够让它工作。在哪里以及如何将其添加到javascript文件中？我真的很擅长JS，所以我非常感谢你能给予的任何帮助！

Answer 1

我决定使用Flexbox来解决这个问题。 javascript建议不起作用，因为原始函数为对象写了高度，并且在调整大小时不会覆盖该高度（我认为因为在初始加载之后，对象具有设置的高度）。

这是解决问题的Flexbox代码（codepen demo）

<强> HTML

<div class="row equalize-row">
    <div class="col-md-3 col-xs-6 equalize">
        <div class="thumbnail">
        ...
        </div>
    ...
    </div>
</div>

<强> CSS

.equalize-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.equalize {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex
}

Answer 2

匹配高度JS将满足您的需求。您所做的只是添加引用https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js“和这个小代码片段：

$(function() {
    $('.equalize').matchHeight();
});

Answer 3

使用您的第一个示例，只需添加一个大小调整处理程序，如下所示：

$(document).ready(function() {   
    equalHeight($(".equalize")); 

    $(window).resize(function() {
        equalHeight($(".equalize"));
    });
 });

这应该可以解决问题。我不在我的电脑上，所以我无法测试它。让我知道它是如何工作的。

即使在调整窗口大小后，如何使引导缩略图大小相同？

3 个答案: