Question

I’m trying to get the jquery masonry script to reshuffle after I animate the size of a div. I had seen some examples but I just can’t seem to get it working. I tried:

<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>

I also tried

<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>

For some reason I can’t get the reshuffle to happen. Here is the page it’s not working with http://www.klossal.com/masonry.html

thanks in advance for any help on this.

Answer 1

Masonry(“reload”) should work but you have an error in your line $("#container|).masonry("reload");. Your need a closing normal quote and not a pipe like so: $("#container").masonry("reload"); I also don’t think I don’t think you need isotope to shuffle. The easist would be to reorder the tiles before feeding it to masonry. Simple look at my site (http://www.phpdevpad.de). When you click on the menu on the left and try different combinations the tiles are shuffled.