Question

我的代码适用于各种屏幕尺寸的响应式网格，但仅在加载时，当您调整窗口大小（减小窗口大小）时，变量＆＃34; MaxHeight＆＃34;不是减少而是不变的。 MaxHeight仅更改onLoad，但不会更改窗口大小。有什么帮助吗？

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

}）;

  $(window).resize(function() {
var maxHeight = 0;          
$(".photo").each(function(){
  if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});         
$(".photo").height(maxHeight);

}）;

还有多个div：

    <div class="photo" style="display:table-row; position:relative">
  <a href="#"><img src="link-to-image" style="width: 100%; height: auto"></a>
  <div class="corner">
<span style="font-weight:bold">Lorem Ipsum</span>
<span style="font-style:italic;color:#bebebe;">ipsum</span>  
</div>
</div>

.photo {
width: 33%;
float: left;
box-sizing: border-box;
padding: 20px;
text-align: center;
/* border: 1px solid black; */
height: auto;
}

但问题出现了，虽然连续3列中的一列包含高度较大的图像，但整个下一行都会被销毁。

窗口大小调整时JS高度重置

0 个答案: