香草砌體+ JQuery翻轉

Question

我是使用香草砌體的牆塊的runnig 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對象（而不是創建另一個實例）並重新加載它。

它可以像這樣loook（把它放在你的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.S. 使用jQuery Masonry可以爲您節省一些麻煩，因爲它可以嵌入到頭部。