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

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

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

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