JQuery如何像css3一样进行条件调整？答案

【问题标题】：JQuery how to do conditional resize like css3?JQuery如何像css3一样进行条件调整？
【发布时间】：2013-07-18 21:17:20
【问题描述】：

现在我的网站有使用同位素显示在两列中的项目。问题是，当您更改页面大小时，我的网站会响应，帖子将开始重叠。现在我正在使用一个方向改变监听器，但我的函数被每个像素调用，因此无缘无故地导致大量 CPU 负载。现在我想做的是让它只在满足特定条件时运行代码，就像在 css3 中一样。例如，如果页面变为小于 600 像素，则运行函数 X，但它只需要在尺寸小于该值时运行，因此如果低于 550 像素或 350 像素，它将不会运行。这就是我的代码目前的样子。 ReloadPosts 只是告诉同位素刷新

var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    reloadPosts();
}, false);

【问题讨论】：

标签： javascript jquery events orientation

【解决方案1】：

也许这会对你有所帮助

     $(window).resize(function(){
        setTimeout(doResizing,200);

    });


    function doResizing() {
        if ( $(window).width() > 601 ) { /* do stuff */ }
        if ( $(window).width() < 600 ) { /* do stuff */  }


    };

    doResizing();

});

【讨论】：

【解决方案2】：

看看smartresize plugin，即included with isotope。在幕后，它使用了一种去抖动技术，这样调整大小的方法就不会被淹没。

var $container = $('#container')

// when you setup isotope, disable normal resizing
$container.isotope({
    // options...
    resizable: false
});

$(window).smartresize(function(){
    // code to handle resizing (i.e. reloadPosts())
});

【讨论】：