无法在初始化之前调用石工方法；试图称“毁灭"

所以我正在尝试结合jQuery Masonry插件(来自: http://masonry.desandro.com/)，当分辨率较低时，可以使用modernizr杀死砖石，这样我的div就会恢复为居中的部分宽度布局.我承认我的JavaScript技能仍在开发中，但是我认为社区可能会帮助我解决这一问题.

So I am attempting to combine jQuery Masonry plugin ( from : http://masonry.desandro.com/ ) with modernizr to kill masonry when at low resolutions so that my divs revert to a centered partial width layout. I will admit that my javascript skills are still in developing, but I figured the community might be able to help me out on this one.

在低于768 px的分辨率下，如果活动，我希望将石工销毁；在更高的分辨率下，如果尚未运行，则希望其执行.目前，除我在控制台中遇到此错误外，其他所有功能均正常运行: 在初始化之前无法在砌体上调用方法；尝试呼叫破坏" .这是我处理此任务的代码.

At resolutions below 768 px I would like masonry to be destroyed if active and when at larger resolutions I would like it to execute if not already running. Presently everything is working perfectly except I am getting this error in my console:cannot call methods on masonry prior to initialization; attempted to call 'destroy'. This is the code that I have that handles this task.

        $(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();
    });

因此，我能找出解决方法的唯一方法是全局声明一个布尔变量，以便可以在两个代码区域之间使用它.我已经读过这是一个不好的做法，但是由于这是该变量的唯一用法，并且没有可能的安全隐患，我是否应该仍然不这样做?

So the only way that I could figure out how to fix this is by declaring a boolean variable globally so that I could use it between the two areas of code. I have read this is bad practice, but as this is the only use for this variable, and there are no possible security concerns, should I actually still not do this?

        //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;
            }
        }