我使用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,所以我非常感谢你能给予的任何帮助!
答案 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"));
});
});
这应该可以解决问题。我不在我的电脑上,所以我无法测试它。让我知道它是如何工作的。