香草砌体+ 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可以为您节省一些麻烦，因为它可以嵌入到头部。