javascript - 在调整大小时重新应用 JavaScript 代码

Question

我曾尝试在 stackoverflow 上查看有关此问题的信息，并找到了一些建议，但是我无法让其中任何一个为我工作。我试图确保每次调整浏览器窗口大小时 div/javascript 的高度都会更新。

我设法让浏览器使用下面的代码在没有任何缓存的情况下完全刷新页面，但是每次都刷新页面并不理想。

$(window).bind('resize', function(e)
{
  if (window.RT) clearTimeout(window.RT);
  window.RT = setTimeout(function()
  {
    this.location.reload(false); /* false to get page from cache */
  }, 100);

很难改变高度，因为改变片段的分辨率并没有太大作用，但我希望你能理解我的问题。

go();
window.addEventListener('resize', go);


function go() {
  var maxHeight = 0;
  $('.text').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
  });
  $('.container .box, .text .box').css({
    height: maxHeight + 'px'
  });
}

.container {
  width: 400px;
  height: 500px;
}

.box {
  width: 100%;
  margin: auto;
  background-color: #ffcccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="box">
    <p class="text">
      We are even height after resizing browser
    </p>
  </div>

  <div class="box">
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a maximus nisi. Etiam tempus venenatis ante, quis iaculis magna aliquet ac. Curabitur sit amet ipsum dolor. Maecenas finibus, lectus ut aliquet laoreet, eros libero semper tortor, nec facilisis
      purus nulla sed urna. Fusce laoreet finibus pharetra. Aliquam ut elit ultrices, consequat dui id, malesuada quam. Praesent semper ex sapien, elementum maximus nibh venenatis vitae. Fusce quis nisi imperdiet, rutrum elit et, ullamcorper velit. Curabitur
      vitae purus interdum ligula efficitur porttitor. Curabitur in nibh non nisi porttitor sagittis viverra ut sem
    </p>
  </div>

  <div class="box">
    <p class="text">
      There is more text in this box. <br> <br> yet the boxes are same height
    </p>
  </div>

</div>

或者，我还尝试了以下 javascript 代码。它们都是我在网上找到的东西，因为我很难自己写，但我不确定我是否正确应用它们，因为它们不能正常工作。

var maxHeight = 0;
$('.values_text').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.us_content .values_text, .values_li .values_text').css({height:maxHeight + 'px'});



window.addEventListener('resize', function(event){
    maxHeight = Math.max(maxHeight, $(this).height());
});

感谢任何帮助和建议

Answer 1

我可以看到您在提供的代码中使用了 jQuery。
jQuery 有一个内置函数，每次调整大小时都会触发一个函数。

function ajdustSizes() {
  var maxHeight = 0;
  $('.text').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
  });
  $('.container .box, .text .box').css({
    height: maxHeight + 'px'
  });
}
$(window).resize(function() {ajdustSizes();});
ajdustSizes();

.container {
  max-width: 400px;
  height: 500px;
}

.box {
  width: 100%;
  margin: auto;
  background-color: #ffcccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">

  <div class="box">
    <p class="text">
      We are even height after resizing browser
    </p>
  </div>

  <div class="box">
    <p class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque a maximus nisi. Etiam tempus venenatis ante, quis iaculis magna aliquet ac. Curabitur sit amet ipsum dolor. Maecenas finibus, lectus ut aliquet laoreet, eros libero semper tortor, nec facilisis
      purus nulla sed urna. Fusce laoreet finibus pharetra. Aliquam ut elit ultrices, consequat dui id, malesuada quam. Praesent semper ex sapien, elementum maximus nibh venenatis vitae. Fusce quis nisi imperdiet, rutrum elit et, ullamcorper velit. Curabitur
      vitae purus interdum ligula efficitur porttitor. Curabitur in nibh non nisi porttitor sagittis viverra ut sem
    </p>
  </div>

  <div class="box">
    <p class="text">
      There is more text in this box. <br> <br> yet the boxes are same height
    </p>
  </div>

</div>

在此代码段中，您可以看到在加载页面时使用 JS 代码触发 adjustSizes() 函数，而且每次 jQuery 发生调整大小事件时也是如此。

还有

如果您希望容器以某种方式“响应”，并且要使此代码实际运行，我建议您在 .container CSS 中将宽度更改为 max-width，这样如果页面小于容器会适应。

希望对你有帮助!