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的新位置，所以我会先隐藏然后触发容器大小调整。这可能不是最好的方法，但是我可以通过最简单的方法来达到目的。