바닐라 메이슨 + JQuery 플립

Question

저는 바닐라 메이슨을 사용하여 블록 벽으로 RoR 어플리케이션을 실행 중이며이 벽의 각 블록을 JQuery Flip으로 뒤집을 수 있습니다! 플러그인. 문제는 블록의 각면에있는 내용의 길이가 다를 수 있으므로 중복되지 않도록 각 뒤집기 작업 후에 벽 위치를 다시로드해야한다는 것입니다.

내 코드는 첫 번째 블록을 뒤집을 때 단방향으로 작동하지만 뒤집기를 되돌릴 때 겹치는 부분이 있습니다. 여기 부하에 벽돌을 초기화하고

이 튀기는-wall.js 내 코드입니다 :

:

여기

$(document).ready(function(){ 
    $('.sponsorFlip').bind("click",function(){ 
      var elem = $(this); 
    var wall = new Masonry(document.getElementById('container'), { 
        gutterWidth:5, 
        isFitWidth: true 
        }); 

    if(elem.data('flipped')) 
    { 
     elem.revertFlip(); 
     elem.data('flipped',false); 
        wall.reload(); 
    } 
    else 
    { 
     elem.flip({ 
      direction:'lr', 
      speed: 350, 
      onBefore: function(){ 
       elem.html(elem.siblings('.sponsorData').html()); 
      } 
     }); 
     elem.data('flipped',true); 
     wall.reload(); 
    } 
}); 

}); 

은 세 단계입니다

제발, 내가 뭘 잘못하고 있는지 말해 줄 수 있어요. 감사합니다.

Answer 1

필자가 내 로컬 호스트에서 테스트 한 바에 따르면 뒤집기가 끝나면 (이미 다른 인스턴스를 만드는 대신에) 이미 초기화 된 Masonry 객체를 참조하고 다시로드해야합니다.

이렇게하면 되풀이 될 수 있습니다 (onload 함수 대신 넣으십시오).

$(window).load(function() { 
    // initialize Masonry - later on you will refer to this wall variable 
    var wall = new Masonry(document.getElementById('container'), {gutterWidth:5, isFitWidth: true}); 

    $('.box').click(function() { 
     var elem = $(this); 

     // data('flipped') is a flag we set when we flip the element: 

     if(elem.data('flipped')) 
     { 
     // If the element has already been flipped, use the revertFlip method 
     // defined by the plug-in to revert to the default state automatically: 

     elem.revertFlip(); 
     // Unsetting the flag: 
     elem.data('flipped',false);  

     } 
     else 
     { 
     // Using the flip method defined by the plugin: 

     elem.flip({ 
      direction:'lr', 
      speed: 350, 
      onBefore: function(){ 
       // Insert the contents of the .sponsorData div (hidden 
       // from view with display:none) into the clicked 
       // .sponsorFlip div before the flipping animation starts: 

       elem.html(elem.siblings('.box').html()); 
      } 
     }); 

     // Setting the flag: 
     elem.data('flipped',true); 

     } 
      // reload already existing Masonry object 
     wall.reload(); 
    }) 
}) 

P. jQuery Masonry를 사용하면 헤드에 임베드 될 수 있으므로 번거 로움을 덜어줍니다.