Question

Here is the site.

当我调整窗口大小时，不会触发布局。因此，在我调整大小后，我必须刷新浏览器才能看到重新配置的布局。我查看了Masonry文档并找到了我认为描述我的问题的页面：http://masonry.desandro.com/methods.html#bindresize

$container.masonry('bindResize')

但是，我不确定我应该在哪里实施它。以下是我目前正在使用的代码。

if(jQuery().isotope) {

    $container = jQuery('#masonry');

    $container.imagesLoaded( function() {

        $container.isotope({
            itemSelector : '.item',
            masonry: {
                columnWidth: $(document).width() > 1035 ? 240 : 320
            },
            getSortData: {

                order: function($elem) {
                    return parseInt($elem.attr('data-order'));
                }

            },
            sortBy: 'order'
        }, function() {

            // Isotope Chrome Fix   
            setTimeout(function () {        
                jQuery('#masonry').isotope('reLayout'); 
            }, 1000);

        });


    }); 

    // filter items when filter link is clicked
    $container = jQuery('#masonry');

    jQuery('#filter li').click(function(){

        jQuery('#filter li').removeClass('active');
        jQuery(this).addClass('active');

        var selector = jQuery(this).find('a').attr('data-filter');

        $container.isotope({ filter: selector });

        return false;

    });


}

有人能帮助我吗？

Answer 1

if(jQuery().isotope) {

    $container = jQuery('#masonry');

    $container.imagesLoaded( function() {

        $container.isotope({
            itemSelector : '.item',
            masonry: {
                columnWidth: 240
            },
            getSortData: {

                order: function($elem) {
                    return parseInt($elem.attr('data-order'));
                }

            },
            sortBy: 'order'
        }, function() {

            // Isotope Chrome Fix   
            setTimeout(function () {        
                jQuery('#masonry').isotope('reLayout'); 
            }, 1000);

        });


    }); 

    // filter items when filter link is clicked
    $container = jQuery('#masonry');

    jQuery('#filter li').click(function(){

        jQuery('#filter li').removeClass('active');
        jQuery(this).addClass('active');

        var selector = jQuery(this).find('a').attr('data-filter');

        $container.isotope({ filter: selector });

        return false;

    });
//added this line
    jQuery(window).resize(function(){jQuery('#masonry').isotope('reLayout'); });
}

我刚刚添加了一行，它会起作用。

Answer 2

您是否尝试在$ container var？

之后插入bindResize Snippet

    // filter items when filter link is clicked
    $container = jQuery('#masonry');

    $container.masonry('bindResize');

    jQuery('#filter li').click(function(){ 
     ...
    }

应该在Resize-Event上触发bindResize方法，因此您无需手动将其添加到事件中。但是Amit的解决方案也应该有效。但是你可以在调整大小时删除演示站点上的刷新吗？我无法在那里测试任何东西。

砌体：调整浏览器大小时不会触发布局

2 个答案: