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

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

1 个答案: