Javascript jQuery resize（）使用浏览器最大化按钮

这是我在调整窗口大小时触发的代码：

$(window).resize(function()
{   
    setDisplayBoardSize();
});

当我调整窗口的大小并正常运行我的函数时，会很好地激发，正如预期的那样

如果我按下最大化按钮，尽管它不能正常工作

这是setDisplayBoardSize（）函数：

function setDisplayBoardSize()
{
    var width = $(".display_container").width();

    for (i=min_columns; i<=max_columns; i++)
    {
        if ((width > (i*(item_width + gap))) && (width < ((i+1) * (item_width + gap))) )
        {
            $("#display_board").css("width",(i*(item_width + gap))+ "px");
        }
    }
}

函数setDisplayBoardSize（）
{
变量宽度=$（“.display_container”）.width（）；
对于（i=最小列；i（i*（项目宽度+间距））和&（宽度<（（i+1）*（项目宽度+间距）））
{
$（“显示板”）.css（“宽度”，（i*（项目宽度+间隙））+“px”）；
}
}
}

我认为问题在于，当单击浏览器最大化按钮时，它会启动一个函数，该函数读取调整大小之前的.display_容器宽度，然后将窗口调整到最大值，这意味着我的显示板大小不正确

如果我是对的，那么在窗口大小调整到最大值后，如何获得.display\u容器元素的大小

应该注意，我已经在Chrome和Firefox中测试过了

感谢您对建议的修复进行编辑：

这是你的电话号码 这是我的答案

如您所见，我完全重新考虑了原始jQuery代码。我从全局删除了所有内容，并删除了函数。已经需要一个函数，所以我只需在该函数中执行所有操作，然后在初始页面加载时立即调用它

我做的另一个改变是向后增加for循环，从允许的最宽宽度大小（5）开始，逐步减小到允许的最小宽度大小（2）

另外，在for循环中，我创建了

j

和

k

变量，以便于读取这些条件

主要的变化是if语句。如果我们在进行max_列迭代，并且容器的宽度更宽

k

，我们希望将电路板的宽度设置为

k

，并跳出for循环，否则我们将评估您的原始If语句，否则，如果我们在进行min_列迭代，并且容器的宽度小于

j

，则，我们想将电路板的宽度设置为

j

我在Chrome上测试过，效果很好。我希望这对你有帮助

$(document).ready(function()
{    
    $(window).resize(function() 
    {
        var item_width = 200, 
            item_height = 300, 
            gap = 20,
            min_columns = 2, 
            max_columns = 5,
            min_width = min_columns * (item_width + gap), 
            max_width = max_columns * (item_width + gap),
            container_width = $(".display_container").width(),
            $display_board = $("#display_board"),
            $display_board_ol_li = $display_board.find("ol > li");

        //console.log("container width: " + container_width);

        for (var i = max_columns; i >= min_columns; i--)
        {
            var j = i * (item_width + gap),
                k = (i+1) * (item_width + gap);

            //console.log("j: " + j);
            //console.log("k: " + k);
            //console.log("display_board width (before): " + $display_board.css("width"));

            if (i === max_columns && container_width > k) 
            {
                $display_board.css("width", max_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;                
            } 
            else if (container_width > j && container_width < k)
            {
                $display_board.css("width", j + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
                break;
            }
            else if (i === min_columns && container_width < j) 
            {
                $display_board.css("width", min_width + "px");
                //console.log("display_board width (after): " + $display_board.css("width"));
            }
        }

        $display_board_ol_li.css({

            "width" : item_width + "px",
            "height": item_height + "px",
            "margin": gap/2 + "px"

        });

    }).resize();

});​

$（文档）.ready（函数（）
{    
$（窗口）。调整大小（函数（）
{
变量项_宽度=200，
项目高度=300，
差距=20，
最小列数=2，
最大列数=5，
最小宽度=最小列*（项目宽度+间隙），
最大宽度=最大列*（项目宽度+间隙），
容器宽度=$（“.display\u container”）.width（），
$display_board=$（“#display_board”），
$display\u board\u ol\u li=$display\u board.find（“ol>li”）；
//控制台日志（“容器宽度：+容器宽度”）；
对于（变量i=最大列；i>=最小列；i--）
{
var j=i*（项目宽度+间隙），
k=（i+1）*（项目宽度+间隙）；
//控制台日志（“j:+j”）；
//控制台日志（“k:+k”）；
//log（“display_board width（before）：”+$display_board.css（“width”）；
如果（i==最大列数和容器宽度>k）
{
$display_board.css（“宽度”，最大宽度+“px”）；
//log（“display_board width（after）：”+$display_board.css（“width”）；
打破
} 
else if（容器宽度>j&&容器宽度

某些浏览器（如ie和opera）会触发此事件，但有一些限制，此插件可以解决此问题：

---

我在一个响应迅速的网站上遇到了类似的问题，除了图像幻灯片外，每个资源都会适当地调整大小和移动。这只发生在IE中，并且只发生在您从平板电脑断点开始，然后点击最大化按钮并输入桌面断点时

最终解决问题的方法是使用Paul Irish提供的以下方便代码限制resize触发器：

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');


// usage:
$(window).smartresize(function(){
  // code that takes it easy...
});

你可以在这里看到他关于它的完整帖子（从2009年开始）：

希望这对其他人有所帮助。

var window\u width\u check\u big=false，//如果window大于my\u width，则标记true
var window_width_check_big = false, // flag true if window bigger than my_width
window_width_check_small = false,   // flag true if window smaller than my_width
my_width = 1221; // Change to your width

function get_window_size() {
    if(window.innerWidth > my_width) {
        window_width_check_big = true;
    }
    if(window.innerWidth < my_width) {
        window_width_check_small = true;
    }   
}

get_window_size();

$(window).resize(function() {

    if(window.innerWidth > my_width) {
        window_width_check_big = true;
    }
    if(window.innerWidth < my_width) {
        window_width_check_small = true;
    }
    if( window_width_check_small && window_width_check_big ) {
        window_width_check_big = false;
        window_width_check_small = false;
        get_window_size();
        // Start function that you need
    }
});

window\u width\u check\u small=false，//如果window小于my\u width，则标记true
我的宽度=1221；//改变你的宽度
函数get\u window\u size（）{
如果（window.innerWidth>my_width）{
窗口\u宽度\u检查\u大=真；
}
if（window.innerWidthmy_width）{
窗口\u宽度\u检查\u大=真；
}
if（window.innerWidth

这件事也发生在我身上，我不知道为什么，直到我读了你的帖子。看起来你是对的，函数在我按下最大化之前就启动了，所以为了解决这个问题，我使用了一个小延迟

$（窗口）。调整大小（函数（）
{   
setTimeout（函数（）{
setDisplayBoardSize（）；
}, 100);
});<
var mResizeTimer;
function setWindowResizeEndEvent() {

    $(window).on('resize', setTimerForResizeEnd);
}

function setTimerForResizeEnd() {
    clearTimeout(mResizeTimer);
    mResizeTimer = setTimeout(onResizeEnd, 100);
}

function onResizeEnd() {
    $(window).off('resize', setTimerForResizeEnd);
    $(window).resize();

    setWindowResizeEndEvent();
}

function setWindowResizeEndEvent() {

    $(window).on('resize', setTimerForResizeEnd);
}

var mResizeTimer;
function setTimerForResizeEnd() {
    clearTimeout(mResizeTimer);
    mResizeTimer = setTimeout(onResizeEnd, 100);
}

function onResizeEnd() {
    $(window).off('resize', setTimerForResizeEnd);
    $(window).resize();

    setWindowResizeEndEvent();
}