jquery masonry toggle visibility issue

jquery masonry toggle visibility issue

I am using Desandro's Masonry Plugin v3.1.2. I am loading multiple content
sections from a database which should be displayed with this layout type
(different widths and heights; with and without images, etc). I have some
buttons on top to toggle the different content rows. However when I hide
all the rows and show the selected by the user the masonry stop working. I
have to change the browser size to make the boxes get the correct layout
again.
Here is a fiddle with the code: http://jsfiddle.net/jpruizs/x66nY/1/
As you can see when you first load the page, the boxes are layed out
properly, however when you click on one of the links on top, the boxes are
displayed in a single vertical column.
$(function(){
// Apply masonry layout to all containers
var $container = $('.container');
$container.masonry({
columnWidth: 50,
itemSelector: '.activity',
gutter: 15
});
$('.link').click(function(){
// Hide all visible containers
$(".container:visible").hide();
// Get the container to show
row = $(this).attr('data-row');
var $container = $("." + row);
$container.toggle('slow');
$container.masonry({
columnWidth: 50,
itemSelector: '.activity',
gutter: 15
}).masonry();
});
});
If you resize the browser window (or the fiddle panel) you will see that
the masonry layout reloads again.
Anyone knows how to fix this issue?
Thanks