masonry.js 不会洗牌

Question

我正在尝试测试是否有一个带有切换滑动上/下按钮的 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 的新位置，所以我会先隐藏然后触发容器调整大小。这可能不是最好的方法，但我能想到让它做你想做的最简单的方法。