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

时间:2016-08-24 18:22:56

标签: javascript jquery html css twitter-bootstrap

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

选项1 bootply example

    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,所以我非常感谢你能给予的任何帮助!

3 个答案:

答案 0 :(得分: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
}

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

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

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

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