Question

我使用Masonry并需要根据当前屏幕宽度更改网格布局。我使用.resize()但我只需要在越过断点时更改布局。例如：

(person changes window size)

    if over 800
    run function

    if less than 800
    run function

我能做到这一点。但是，它会在每次调整大小调用上运行该功能。我只需要在用户越过边界时运行该函数：

if window resized from 500 to 900 
run function

触发功能的最佳方式是什么，只有在他们越过800断点时才会出现？

Answer 1

您可以使用简单的去抖功能

$(window).on('resize', (function() {
    var o, u;

    return function() {
        var w = $(this).width();

        if (w >= 800 && !o) {
            o = true; u = false;

            $('body').append('<div>Over 800</div>');
        }else if (w < 800 && !u) {
            o = false; u = true;

            $('body').append('<div>Under 800</div>');
        }
    }
})());

FIDDLE

Answer 2

无法以您描述的方式指定事件触发，但您可以在eventHandler中为resize事件实现此类逻辑。

您应该存储大小并针对此类行为进行检查：

function resizeHandler() {
    var newWidth = $(window).width();
    if (window.lastWidth > 800 && newWidth <= 800) {
           // size went from above 800 to below 800
    } else if (window.lastWidth < 800 && newWidth >= 800 ) {
           // size went from below 800 to above 800
    } 
    // else border not crossed
    window.lastWidth = newWidth;
}
window.lastWidth = $(window).width(); // default to window size at beginning
$(window).resize(resizeHandler);

Answer 3

您可以将计算密集型函数包装在检查器中，以确保仅在超过阈值时执行。

var bool = $(window).width() < 400;
$( window ).resize(function(e) {
    if ($(window).width() < 400 != bool) {
        bool = !bool;
        console.log($(window).width());
    }
});

演示：http://jsfiddle.net/2gMfC/1/

Answer 4

您可以创建自定义事件并添加事件侦听器来调用您的函数。

function emitEvent(evt, obj, bubbles) {
     if (typeof evt != 'string') return false
     if (!window.customEvents) window.customEvents = {}
     var customObject = typeof obj == 'object' ? obj : {};
     var eventBubble = typeof bubbles == 'boolean' ? bubbles : false;
     window.customEvents[evt] = new CustomEvent(evt, {
         detail: customObject,
         bubbles: eventBubble,
         cancelable: true
     });
     this.dispatchEvent(window.customEvents[evt])
}

一旦将窗口调整为您选择的断点并调用事件监听器，就调用emitEvent（'myevent'）。 window.addEventListener（ 'myevent'，MYFUNC）

Answer 5

如果您准备使用外部库，enquire.js就是为此而准备的。（我不参与enquire.js的开发）

你这样设置：

enquire.register("screen and (max-width: 800px)", {
    match : function() {
        // Your function here
    }
});

您可以看到 example here 。

在不同的屏幕宽度更改砌体布局

5 个答案: