не может вызывать методы кладки перед инициализацией; попытался вызвать «destroy»

Question

Итак, я пытаюсь объединить плагин jQuery Masonry (от: http://masonry.desandro.com/) с modernizr, чтобы убить кладку при низких разрешениях, чтобы мои divs вернулись к макету с частичной шириной. Я признаю, что мои навыки javascript все еще развиваются, но я решил, что сообщество может помочь мне в этом.

При разрешении ниже 768 px Я бы хотел, чтобы каменная кладка была уничтожена, если активна, и когда при больших разрешениях я хотел бы выполнить ее, если она еще не запущена. В настоящее время все работает отлично, за исключением того, что я получаю эту ошибку в моей консоли: не может вызывать методы на кладке до инициализации; попытался назвать «уничтожить». Это код, который у меня есть, который обрабатывает эту задачу.

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