JQuery Masonry ! Update columnWidth On Window Resize

问题

I'm working working on Responsive Layout where I'm using JQuery Masonry as well.

I'm using following script to get current column width.

var curWidth; 
var detector;

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

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

My JQuery Masonry init script is something like this..

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

My 1st script is fetching width correctly, but in masonry that width isn't updating... How can I implement both load & resize function so that my curWidth will be updated for Masonry as well on window resize

回答1:

You need to set the columnWidth of the masonry after resize:

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

Yuo can read more about the masonry methods here: http://masonry.desandro.com/methods.html

回答2:

bindResize can be used to resize all items in the container when using a fluid layout (bindResize is in https://github.com/desandro/masonry/blob/master/dist/masonry.pkgd.js

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

$(window).resize(function () {
    $container.masonry('bindResize')
});

来源：https://stackoverflow.com/questions/8474627/jquery-masonry-update-columnwidth-on-window-resize

标签

jquery

jquery-masonry

window-resize