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

Question

我曾尝试在 stackoverflow 上查找有关此问题的一些建议，但我无法让其中任何一个对我有用。我试图确保每次调整浏览器窗口大小时更新 divs/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());
});

任何帮助和建议表示赞赏

标签： javascriptjqueryhtmlcss

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 有一个 resize 事件时也是如此。

还

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

我希望这可以帮助你！