jQuery Masonry example

HTML

<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<section class="secportfolio">
			<div class="page-header">
				<h1><small>
						<a href="#">All</a>
						<a href="#2D">2D</a>
						<a href="#3D">3D</a>
						<a href="#Anim">Anim</a>
				</small></h1>
			</div>
			<div id="portfolio">
					<div class="bloc 2D">
						<a class="thumb" href="#projet0"><img src="http://placehold.it/150x100" alt="" width="150" height="100"/></a>
						<div class="info">
							<img src="http://placehold.it/630x300" alt="" width="630" height="300"/>
							<p>ici les infos de mon project</p>
						</div>
					</div>
					<div class="bloc 3D">
						<a class="thumb" href="#projet1"><img src="http://placehold.it/150x100" alt="" width="150" height="100"/></a>
						<div class="info">
							<img src="http://placehold.it/630x300" alt="" width="630" height="300"/>
							<p>ici les infos de mon project</p>
						</div>
					</div> 
					<div class="bloc Anim">
						<a class="thumb" href="#projet2"><img src="http://placehold.it/150x100" alt="" width="150" height="100"/></a>
						<div class="info">
							<img src="http://placehold.it/630x300" alt="" width="630" height="300"/>
							<p>ici les infos de mon project</p>
						</div>
					</div>
					<div class="bloc 2D">
						<a class="thumb" href="#projet3"><img src="http://placehold.it/150x100" alt="" width="150" height="100"/></a>
						<div class="info">
							<img src="http://placehold.it/630x300" alt="" width="630" height="300"/>
							<p>ici les infos de mon project</p>
						</div>
					</div>
					<div class="bloc 3D">
						<a class="thumb" href="#projet4"><img src="http://placehold.it/150x100" alt="" width="150" height="100"/></a>
						<div class="info">
							<img src="http://placehold.it/630x300" alt="" width="630" height="300"/>
							<p>ici les infos de mon project</p>
						</div>
					</div>                
					<div class="bloc Anim">
						<a class="thumb" href="#projet5"><img...

CSS

#secportfolio{width:960px; margin: 0 auto;}

.bloc{
	float:left;
	margin: 5px;
	height: 100px;
}
.bloc .info{
	display:none;
}
.bloc.unfold{
	height: 320px;
	width: 630px;
}
.bloc.unfold .info{
	display: block;
}
.bloc.unfold .thumb{
	display: none;
}

JavaScript

var portfolio = $('#portfolio');
	portfolio.masonry({
		isAnimated: true,
		itemSelector:'.bloc:not(.hidden)',
		isFitWidth:true,
		columnWidth:160
	});

	$('h1 a').click(function(e){
		var cls = $(this).attr('href').replace('#','');

		if(cls == null){
			portfolio.find('.hidden').fadeIn(); 
			portfolio.find('.bloc').removeClass('hidden'); 
		}
		portfolio.find('.hidden').fadeIn(); 
		portfolio.find('.bloc').removeClass('hidden'); 
		portfolio.find('.bloc:not(.'+cls+')').addClass('hidden').stop().fadeOut();
		portfolio.find('.'+cls).show(500);
		portfolio.find('.bloc:not(.'+cls+')').hide(500);
		portfolio.masonry(); 
		
		location.hash = cls;
		e.preventDefault(); 
	});
	
	var bloc = portfolio.find('.bloc:first'); 
	var cssi = {width:bloc.width(),height:bloc.height()};
	var cssf = null; 

	portfolio.find('a.thumb').click(function(e){
		var elem = $(this); 
		var cls = elem.attr('href').replace('#','');
		var fold = portfolio.find('.unfold').removeClass('unfold').css(cssi); 
		var unfold = elem.parent().addClass('unfold').css(cssf); 
		if(cssf == null){
			cssf = {
				width : unfold.width(),
				height: unfold.height()
			};
		}
		unfold.css(cssi).animate(cssf);
		portfolio.masonry(); 
		e.preventDefault(); 
	})

	if(location.hash != ''){
		$('a[href="'+location.hash+'"]').trigger('click');
	}