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 initスクリプトはこのようなものです..

$(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 に答える