Question

基本上我有一个函数可以相应地调整元素大小，jquery在窗口大小调整结束时触发函数。

除了将窗口大小调整为原始大小之外，它完美无缺，我看不到像刷新页面那样的东西。考虑到正在调用完全相同的函数，这很奇怪。

可以在 here

中看到问题

Js：

var waitForFinalEvent = (function () {
var timers = {};
return function (callback, ms, uniqueId) {
if (!uniqueId) {
  uniqueId = "Don't call this twice without a uniqueId";
}
if (timers[uniqueId]) {
  clearTimeout (timers[uniqueId]);
}
timers[uniqueId] = setTimeout(callback, ms);
};
})();




$(window).resize(function () {
waitForFinalEvent(function(){

loadcontext();

  //...
}, 10, "some unique string");
});



function loadcontext() {

var winwidth = window.innerWidth;
var winheight = window.innerHeight;

<!-- Fixes layout on screens -->    

if (winwidth < 1200)
{   
$('#blockscontainer').css("left", (winwidth / 2)*-1 );
$('.block').css("width", (winwidth - 30)/ 5 );  
$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);
}
else
{
$('#blockscontainer').css("left", (1200 / 2)*-1 );
$('.block').css("width", 1173 / 5 );
}   

};

CSS：

body { margin: 0px; padding: 0px;  }
#contentcontain {clear: both; left: 50%; }
#blockscontainer {clear: both; height: 100%; max-width: 1180px; width: 100%; background-         color: #EEE; padding: 10px; border-radius: 15px;}
#blockcontext {overflow: auto;width: 100% clear: both; position: relative; height: 100%;    background-color: #DDD;border-radius: 7px; padding-bottom: 20px;}
#footer { width: 100%; margin-top: 30px; text-align: center; background-color: #666; }
#content {  background-color: #333;  padding-top: 50px;}
.block {display: inline-block;  height: 150px; width: 200px; background-color: #FFF; float: left; margin-top: 20px; border: 1px solid #CCC;}

HTML：

<body onload="loadcontext()">
<div id="content">
<div id="contentcontain" align="center">
<div id="blockscontainer">
<div id="blockcontext">
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>
<div class="block">
test content
</div>



</div>
</div>
</div>
<center>
<div id="footer">
content
</div>
</center>
</div>
</body>
</html>

Answer 1

当您将窗口调整为宽度为1200像素以下时，请调用以下行：

$('.block').css("height", (winwidth - 30)/ 7.5 );
$('#blockscontainer').css("width", winwidth -20);

这些导致了您看到的问题，因为当您将窗口大小增加到大约1200px宽时，它们不会重置为任何类型的默认值。这会导致页面看起来不同，因为＃blockscontainer的宽度和每个.block元素的高度都发生了变化。

Jquery（Window）.Resize（）调用函数不正确

1 个答案: