masonry.js不會洗牌

Question

我想要測試出具有切換slideUp/Down按鈕的div，並且像往常一樣將磚石洗到新地點。一旦按下切換按鈕，隱藏的項目會上下滑動，但當按下切換器時，內容可以很好地滑動，但會被下面的div重疊，而且什麼都不會洗牌。有什麼建議麼？

HTML

<div id="container"> 
    <div class="item"> 
    <h1>Title</h1> 
    <p> 
     Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
     tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
     Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
     tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
     a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
     suscipit suscipit arcu orci at est. 
    </p> 
    </div> 
    <div class="item"> 
    <h1>Title</h1> 
    <p> 
     Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
     tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
     Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
     tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
     a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
     suscipit suscipit arcu orci at est. 
    </p> 
    <p> 
     Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
     tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
     Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
     tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
     a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
     suscipit suscipit arcu orci at est. 
    </p> 
    </div> 
    <div class="item"> 
    <h1>Title</h1> 
    <p> 
     Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
     tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
     Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
     tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
     a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
     suscipit suscipit arcu orci at est. 
    </p> 
    <div class="toggler"><a href="#">toggle</a></div> 
    <p class="hidden"> 
      This is the hidden text for the toggler.This is the hidden text for the toggler. 
      This is the hidden text for the toggler. This is the hidden text for the toggler. 
      This is the hidden text for the toggler. This is the hidden text for the toggler. 
      This is the hidden text for the toggler. This is the hidden text for the toggler. 
    </p> 
    <p> 
     Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
     tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
     Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
     tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
     a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
     suscipit suscipit arcu orci at est. 
    </p> 
    </div> 
    <div class="item"> 
    <h1>Title</h1> 
    <p> 
     Praesent id arcu nisl, sit amet hendrerit velit. Phasellus magna elit, 
     tincidunt at iaculis id, semper eget nunc. Duis pellentesque pretium euismod. 
     Etiam et arcu ut ligula bibendum ultricies. Cras fermentum, risus id lacinia hendrerit, 
     tortor urna adipiscing nunc, vitae aliquam odio velit eget nibh. Vivamus eget sapien erat, 
     a dictum enim. Fusce tincidunt, libero at rutrum mollis, magna elit ullamcorper nibh, 
     suscipit suscipit arcu orci at est. 
    </p> 
    </div> 
<div> 

CSS

.item { 
    width: 250px; 
    margin: 5px; 
    padding: 10px; 
    background: #D8D5D2; 
    font-size: 11px; 
    line-height: 1.4em; 
    float: left; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
      border-radius: 5px; 
} 

.hidden { 
    display: none; 
} 

JavaScript的容器大小

$(function(){ 
    $('#container').masonry({ 
     // options 
     itemSelector : '.item', 
     isAnimated: true 
    }), 

    $(".toggler").click 
     (
      function($e) 
      { 
       $(".hidden").slideDown("normal"); 
      } 
     ); 

    $(".toggler").toggle 
     (
      function($e) 
      { 
       $(".hidden").slideDown("normal"); 
      }, 

      function($e) 
      { 
       $(".hidden").slideUp("normal"); 
      } 
     ); 
}); 

Answer 1

Masonry.js纔會觸發動畫。這就是爲什麼在容器div上調用動畫函數的原因，而不是個別的div。你可以通過繼續他們的演示並使用firebug/dev工具來隱藏div來證實這一點。在容器大小調整之前什麼也沒有發生。動畫部分的第一行（http://masonry.desandro.com/docs/animating.htm）還聲明它可以在容器大小調整上進行動畫處理，我會認爲這是觸發動畫的唯一方法。

可能的解決方案可能是調整容器的大小作爲切換的一部分。您可能需要查看插件才能確定它是如何確定其大小的，但我猜想即使將它擴大一個像素也會觸發動畫。我會假設它確定調整大小後每個div的新位置，所以我會先隱藏然後觸發容器大小調整。這可能不是最好的方法，但是我可以通過最簡單的方法來達到目的。