16

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

$(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");
        }
    }
}

我认为问题在于，当单击浏览器最大化按钮时，它会触发读取在调整大小之前获取 .display_container 宽度的函数，然后将窗口调整为最大值，这意味着我的 display_board 大小不正确。

如果我是对的，如何在窗口调整到最大值后获得 .display_container 元素的大小？

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

谢谢

4

7 回答 7

36

这对我也有影响，但我不知道为什么，直到我读了你的帖子。好像你是对的，在我按下最大化之前函数被触发，所以为了解决这个问题，我使用了一点延迟。

$(window).resize(function()
{   
setTimeout(function() {
    setDisplayBoardSize();
}, 100);
});

于 2015-04-22T21:41:32.423 回答
6

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

最终解决问题的是使用 Paul Irish 提供的这个方便的代码来限制调整大小触发器：

(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 年开始）：http: //www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

希望对那里的人有所帮助。

于 2013-06-12T18:04:41.677 回答
4

编辑建议的修复：

这是工作的 jsFiddle ，这里是只有结果的演示。

如您所见，我完全重构了您原来的 jQuery 代码。我从 Global 中删除了所有内容并删除了这些功能。 .resize()已经需要一个函数，所以我只是在该函数中执行所有操作，然后立即调用.resize()以在初始页面加载时调用它。

我做的另一个改变是向后增加你的 for 循环，从你允许的最宽的宽度尺寸开始 (5)，一直到你允许的最小的宽度尺寸 (2)。

此外，在您的 for 循环中，我创建了j变量k，以便更容易阅读这些条件。

主要变化是 if 语句。如果我们正在进行 max_column 迭代并且容器的宽度较宽k，我们希望将板的宽度设置为k并跳出 for 循环，否则我们评估您拥有的原始 if 语句，否则如果我们正在进行 min_column 迭代并且容器的宽度小于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();

});​
于 2012-04-16T20:05:43.437 回答
1 
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
    }
});
于 2014-10-29T06:13:30.153 回答
1

一些浏览器如 ie 和 opera 触发这个事件有一些限制，这个插件可以解决这个问题：

http://benalman.com/projects/jquery-resize-plugin/

于 2012-04-16T20:15:50.890 回答
1

以下代码在 Chrome 和 IE11 中都适用于我：（javascript 和 jQuery）。

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();
}

说明：我正在触发原生 window.resize 事件，在调整大小结束后。这在最大化窗口结束后重新触发调整大小事件。

于 2017-10-03T05:48:18.267 回答
0

以下代码在 Chrome 和 IE11 中都适用于我：（javascript 和 jQuery）。

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();
}

说明：我正在触发原生 window.resize 事件，在调整大小结束后。这在最大化窗口结束后重新触发调整大小事件。

于 2017-10-03T05:35:05.303 回答