javascript - jQuery Masonry 在不同的断点更新列宽

Question

我正在使用 jQuery Masonry，我正在尝试根据窗口宽度更新列宽。我有这个工作没有任何简单的布尔问题：

columnWidth: $(document).width() > 1280 ? 380 : 260

我尝试了几种不同的方法来编写一种else if语句，以便我可以在多个 (3+) 断点处配置不同的值，但我一直在做空。我尝试了以下方法，但没有奏效：

var colWidth;
if ($(window).width() <= 599) { colWidth = 180; } 
else if ($(window).width() >= 600) { colWidth = 240; }
else if ($(window).width() >= 1280) { colWidth = 380; }

columnWidth: colWidth,

有谁知道我怎么能做到这一点？

Answer 1

如果需要，一种可行但不是很好的解决方案是重新创建砌体：

function getColWidth() {
    return (window.innerWidth <= 500) ? 62 : 75;
}

window.onresize = attemptSetColWidth;

var prevWidth = getColWidth();
function setColWidth() {
    if(prevWidth == getColWidth()) return;
    $container.masonry('destroy');
    $container = $('.productContainer').masonry({
        columnWidth: getColWidth(),
        gutter: 10,
    });
    $container.masonry('reloadItems');
    prevWidth = getColWidth();
}

var timeOutId;
function attemptSetColWidth() {
    clearTimeout(timeOutId);
    timeOutId = setTimeout(setColWidth, 500);
}