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

1 个答案: