2014-09-26 3 views
1

그래서 jQuery Masonry 플러그인 (from : http://masonry.desandro.com/)과 modernizr을 결합하여 저해상도에서 벽돌을 죽일 때 내 div가 중앙 부분 폭 레이아웃으로 되돌아 가려고합니다. 나는 나의 자바 스크립트 기술이 아직 개발 중에 있다는 것을 인정할 것이다. 그러나 나는 지역 사회가 나를 도와 줄 수있을 것이라고 생각했다.초기화 이전에 벽돌에있는 메소드를 호출 할 수 없습니다.

해상도가 768px 미만인 경우 벽돌을 활성 상태로 파괴하면 더 큰 해상도로 실행하고 싶으면 이미 실행하고 싶습니다. 현재 콘솔에서이 오류가 발생하는 것을 제외하고는 현재 모든 것이 완벽하게 작동합니다. 초기화 이전에 메쏘드를 호출 할 수 없습니다. '파괴'를 호출하려고 시도했습니다. 이것은이 작업을 처리하는 코드입니다. 나는이 문제를 해결하는 방법을 알아낼 수

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

답변

6

당신은 당신이 좋아하는 벽돌에 메서드를 호출 할 때마다 벽돌을 초기화해야

$('#masonry').masonry().masonry('destroy'); 
$('#masonry').masonry().masonry('remove'); 
관련 문제