javascript - 如果屏幕尺寸小于，则停止脚本工作

Question

我有一小段 jQuery:

if (jQuery(window).innerWidth() > 568) {
    jQuery('#boardOfTrustees').masonry({
        itemSelector: '.postWrapper',
    });
}

这工作正常，但我想停止它工作，或者如果屏幕小于特定尺寸则在调整大小时取消初始化它。我试过这个:

jQuery(window).smartresize(function() {
    if (jQuery(window).innerWidth() > 568) {
        jQuery('#boardOfTrustees').masonry({
            itemSelector: '.postWrapper',
        });
    }   
});

.smartresize 是一个去抖动脚本，它运行良好，但对于这个特定场景，它什么也没做，砌体脚本仍然被初始化。如果屏幕小于 568 像素，我如何让第一组 jQuery 停止将自身应用于元素，但如果调整大小大于 568，我如何再次开始工作？

Answer 1

这会在加载时起作用。不调整大小:

if (jQuery(window).innerWidth() < 568) {
    jQuery('#boardOfTrustees').masonry({
        itemSelector: '.postWrapper',
    });
}

要使其在调整大小时起作用，您需要使用方法 destroy 详述 at the documentation.

$(window).resize(function () {
    if (jQuery(window).innerWidth() < 568) {
        jQuery('#boardOfTrustees').masonry('destroy');
    } else {
        jQuery('#boardOfTrustees').masonry({
            itemSelector: '.postWrapper',
        });
    }
});