Javascript masonry probléme

Default
,

Bonjour,
Je créer un portfolio avec Masonry.
J'ai fini de mettre en place les blocs, avec un peu de soucis car seul le code javascript vanilla et non
le jquery fonctionne même après avoir multitudes de tests et de recherches mais bref.

Sur mon site il y aura 3 galerie : dessin, 3d et graphisme.
J'ai expérimenté pendant des heures un bon code java permettant aisément de faire apparaitre
en cliquant sur 3 boutons une grille et de faire disparaitre les deux autres.

J'ai bien mis display:none; pour chaque grille, j'arrive à toutes les faire disparaitre, mais
une apparait une fois sur deux Etc.

Je voudrais une piste de code pour pouvoir faire en sorte
que mes grilles ne soient pas visible au début du site puis qu'elles apparaissent (et que les deux autres disparaissent)
en cliquant sur des boutons.

Merci pour votre aide!

Ce que je fais

j'ai tenté ce code mais le jquery comme dit plus haut n'a aucun effet mis a part le javascript vanilla
http://jsfiddle.net/2rZfU/
j'ai tenté de le modifier en java script vanilla sans succes, j'ai essayé des codes jquery de base ça fonctionne très bien
mais rien ne se passe quand je code du jquery avec masonry.
$(document).ready(function(){around $('#main').masonry({around columnWidth: 100, around itemSelector: '.box',around animate: truearound });aroundaround $('a.filter').click(function(){around filterBoxes(this.id);around })around around function filterBoxes(klass){around if (klass == "all") { klass = "box" }around $('#holder').find('.' + klass)around .hide()around .appendTo('#main')around .fadeIn('300')around $('#main').find('.box:not(.' + klass + ')')around .fadeOut( '300', function(){around $(this).appendTo('#holder') ;around });around setTimeout(function(){ $('#main').masonry() },500);around }aroundaround})around****

Entourez votre code pour bien le mettre en forme