4

我正在研究响应式布局，我也在使用 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 初始化脚本是这样的..

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

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

4

2 回答 2

11

调整大小后，您需要设置砌体的 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

于 2011-12-12T12:59:35.763 回答
1

bindResize 可用于在使用流体布局时调整容器中所有项目的大小（bindResize在https://github.com/desandro/masonry/blob/master/dist/masonry.pkgd.js

$container.masonry({
    itemSelector: '.container'
});

$(window).resize(function () {
    $container.masonry('bindResize')
});
于 2014-03-29T05:42:11.797 回答