JQuery Masonry!Обновить columnWidth при изменении размера окна

Question

Я работаю над Responsive Layout, где также использую 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 //
            });
     });
});

Мой 1-й скрипт правильно выбирает ширину, но в кладке эта ширина не обновляется ... Как я могу реализовать функцию загрузки и изменения размера, чтобы моя curWidth была обновлена ​​для Masonry, а также при изменении размера окна

Answer 1

Вам нужно установить columnWidth кладки после изменения размера:

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

Юо может узнать больше о методах кладки здесь: http://masonry.desandro.com/methods.html

Answer 2

bindResize можно использовать для изменения размера всех элементов в контейнере при использовании макета с текучей средой (bindResize в https://github.com/desandro/masonry/blob/master/dist/masonry.pkgd.js

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

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