Jquery Masonary and item filtering does not work together

Question

I am using a small js filter script to sort the images according based on their classes. It works fine in isolation. As soon as I add masonary plugin to the images. It stops working.

the HTML.........................................................................

unordered list: ul.list containing thumbnails of various sizes.

Javascipt

Filter Script:

$(document).ready(function(){$("ul#filter a").click(function(){$(this).css("outline","none");$("ul#filter .current").removeClass("current");$(this).parent().addClass("current");var a=$(this).text().toLowerCase().replace(" ","-");if(a=="all"){$("ul.list li.hidden").fadeIn("slow").removeClass("hidden")}else{$("ul.list li").each(function(){if(!$(this).hasClass(a)){$(this).fadeOut("normal").addClass("hidden")}else{$(this).fadeIn("slow").removeClass("hidden")}})}return false})})

Masonary:

$(function(){ $('ul.list').masonry();});

I want items filtered and then rearranged with masonary.

Please help me find a solution.

Thanks in advance.

JSNovice