如何在重新排列块之前调整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的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"计数器变量，但我认为你是在发布的代码之外的某个地方设置的。