JQuery砌体!更新columnWidth On Window Resize

Question

我正在开发响应式布局,我也在使用JQuery Masonry.

我正在使用以下脚本来获取当前列宽.

var curWidth; 
var detector;

detector = $('.magic-column');
curWidth = detector.outerWidth(true);

$(window).resize(function(){
    if(detector.outerWidth(true)!=curWidth){
        curWidth = detector.outerWidth(true);
    }
});

我的JQuery Masonry init脚本是这样的..

$(window).load(function(){
     $(function (){
            $wall.masonry({
                    singleMode: true, 
                    columnWidth: curWidth, // This needs to be update on window load & resize both //
            });
     });
});

我的第一个脚本是正确获取宽度,但在砌体中宽度没有更新...我如何实现加载和调整大小功能,以便我的curWidth将更新为Masonry以及窗口调整大小

Answer 1

您需要在调整大小后设置砌体的columnWidth:

$(window).resize(function(){
    if(detector.outerWidth(true)!=curWidth){
        curWidth = detector.outerWidth(true);
        $wall.masonry( 'option', { columnWidth: curWidth });
    }
});

Yuo可以在这里阅读更多关于砌体方法的内容:http://masonry.desandro.com/methods.html