jquery-masonry - div动画后砌体重新洗牌

Question

在我为 div 的大小设置动画后，我试图让 jquery masonry 脚本重新洗牌。我看过一些例子，但我似乎无法让它发挥作用。我试过了：

<script>
$(function(){

$('#container').masonry({
  itemSelector: '.box',
  columnWidth: 100,
  isAnimated: true
});

});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$('#container').masonry({
  itemSelector: '.box',
  columnWidth: 100,
  isAnimated: true
});
});
</script>

我也试过

<script>
$(function(){

$('#container').masonry({
  itemSelector: '.box',
  columnWidth: 100,
  isAnimated: true
});

});
</script>
<script>
$("#test").click( function() {
$("#test").animate ({
"width": 300,
"height": 200
}, 250 );
$("#container|).masonry("reload");
});
</script>

由于某种原因，我无法进行改组。这是它无法使用的页面http://www.klossal.com/masonry.html

提前感谢您对此的任何帮助。

Answer 1

Masonry("reload") 应该可以工作，但是您的行中有错误$("#container|).masonry("reload");。您需要一个结束的正常报价，而不是像这样的管道：$("#container").masonry("reload");我也不认为我认为您不需要同位素来洗牌。最简单的方法是在将瓷砖送入砖石之前重新排列瓷砖。简单看看我的网站 (http://www.phpdevpad.de)。当您单击左侧的菜单并尝试不同的组合时，瓷砖会被打乱。

Answer 2

如果你想要shuffle方法，你需要使用Isotope；Masonry的大姐姐。请参阅此处的 github 讨论。