如何在重新排列块之前调整 columnWidth

Question

我希望列的宽度最小，所以我使用下面的代码来确定设置时每列的大小：

jQuery(document).ready(function() {
    var $container = $('#items');
    var numCols = Math.floor(window.innerWidth/290);
    var newWidth = Math.floor(window.innerWidth/numCols) - 5;
    var styleWidth = newWidth - 20;
    for (i=0; i<nummonos; i++) {
        divname = "brick" + i;
        document.getElementById(divname).style.width = styleWidth + 'px';
    }
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector : '.item',
            columnWidth : newWidth,
            isAnimated: true
        });
    });
});

这对于初始化来说效果很好，但我现在希望能够在浏览器宽度发生变化（用户旋转屏幕等）时以相同的方式调整列宽。

是否有我可以拦截的事件？

我使用的是 jQuery-masonry 的 v2.1.08 版本，但我想如果需要的话我可以轻松升级。

Answer 1

只是一个快速的想法，但如果您将其创建为一个函数并在 document.ready 和 window.resize 上调用它，它不会起作用吗？

$(function(){ setColumns(); });

$(window).resize(function(){ setColumns(); });

// for IPad - orientation change doesn't always trigger window.resize functions
window.onorientationchange = function(){ setColumns(); });

function setColumns(){
    var $container = $('#items');
    var numCols = Math.floor(window.innerWidth/290);
    var newWidth = Math.floor(window.innerWidth/numCols) - 5;
    var styleWidth = newWidth - 20;
    for (i=0; i<nummonos; i++) {
        $('#brick' + i).css('width', styleWidth + 'px');
    }
    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector : '.item',
            columnWidth : newWidth,
            isAnimated: true
        });
    });
}

我使用了您现有的代码，但我将您的 for 循环更改为使用 jQuery 而不是标准的 javascript getElementByID 方法，因为看到在jquery 块。我不确定您从哪里获得 'nummonos' 计数器变量，但我假设您将其设置在您发布的代码之外的某个地方。

如何在重新排列块之前调整 columnWidth

How to adjust columnWidth before blocks are rearranged

jquery

jquery-masonry

masonry