Question

因此，我尝试将jQuery Masonry插件（来自：http://masonry.desandro.com/）与modernizr结合使用，以便在低分辨率下杀死砌体，以便我的div恢复到居中的局部宽度布局。我承认我的javascript技能仍处于开发阶段，但我认为社区可能能够帮助我解决这个问题。

在低于768像素的分辨率下，我希望砌体在活动时被销毁，而在更大的分辨率下，如果尚未运行，我希望它能够被执行。目前一切都工作正常，除了我在我的控制台中收到此错误： 在初始化之前无法调用砌体上的方法;试图打电话＆＃39;销毁＆＃39; 。这是我处理此任务的代码。

        $(window).load( function() {
        $('#masonry').masonry({
            transitionDuration: 10,
            columnWidth:'.sizer',
        });

        if(Modernizr.mq('screen and (max-width:767px)') && $('#masonry').masonry) {
            $('#masonry').masonry('destroy');
        }
    });

    $(document).ready(function() {
        function doneResizing() {
            if(Modernizr.mq('screen and (min-width:768px)')) {
                // action for screen widths including and above 768 pixels 
            $('#masonry').masonry({
                transitionDuration: 10,
                columnWidth:'.sizer',
            });
            }
            else if(Modernizr.mq('screen and (max-width:767px)') && $('#masonry').masonry) {
                // action for screen widths below 768 pixels 
                $('#masonry').masonry('destroy');
            }
        }

        var id;
        $(window).resize(function() {
            clearTimeout(id);
            id = setTimeout(doneResizing, 0);
        });

        doneResizing();
    });

因此，我能弄清楚如何解决这个问题的唯一方法是全局声明一个布尔变量，以便我可以在两个代码区域之间使用它。我已经读过这是不好的做法，但由于这是这个变量的唯一用途，并且没有可能的安全问题，我真的还是不应该这样做吗？

        //init masonry
    $(window).load( function() {
        $('#masonry').masonry({
            transitionDuration: 10,
            columnWidth:'.sizer',
        }           
        );
        window.masonryIsActive = true;

        if(Modernizr.mq('screen and (max-width:767px)')) {
            $('#masonry').masonry('destroy');
            window.masonryIsActive = false;
        }
        });


    $(document).ready(function() {
        function doneResizing() {   
            if(Modernizr.mq('screen and (min-width:768px)')) {
                // action for screen widths including and above 768 pixels 
            $('#masonry').masonry({
                transitionDuration: 10,
                columnWidth:'.sizer',
            });
            window.masonryIsActive = true;                  
            }else if(Modernizr.mq('screen and (max-width:767px)') && window.masonryIsActive == true) {
                // action for screen widths below 768 pixels 
                $('#masonry').masonry('destroy');
                window.masonryIsActive = false;
            }
        }

Answer 1

无论何时在砌筑中调用任何方法，都必须初始化砌体。

$('#masonry').masonry().masonry('destroy');
$('#masonry').masonry().masonry('remove');

在初始化之前不能调用砌体上的方法;试图称'破坏'

1 个答案: