Untitled

<!DOCTYPE html>
<html lang="es-Es">
<head>
<meta charset="iso-8859-1">
<title>Portafolio Filtrable con jQuery Isotope - Tutosytips.com</title>
<link rel="stylesheet" href="css/style.css">
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/isotope.js" type="text/javascript"></script>
</head>
<body>

<section id="portafolio">
	<div class="filtrar">
		<a href="#" data-filter="*" class="actual"> Todas</a> -
		<a href="#" data-filter=".espana">España</a> -
		<a href="#" data-filter=".alemania">Alemania</a> -
		<a href="#" data-filter=".italia">Italia</a> -
		<a href="#" data-filter=".francia">Francia</a>
	</div>

	<div class="portfolioContenedor">

		<div class="espana">
			<img src="img/seat.png" alt="image">
		</div>

		<div class="alemania">
			<img src="img/bmw.png" alt="image">
		</div>

		<div class="alemania">
			<img src="img/mercedes.png" alt="image">
		</div>

		<div class="alemania">
			<img src="img/opel.png" alt="image">
		</div>

		<div class="alemania">
			<img src="img/audi.png" alt="image">
		</div>

		<div class="alemania">
			<img src="img/volkswagen.png" alt="image">
		</div>

		<div class="francia">
			<img src="img/peugeot.png" alt="image">
		</div>

		<div class="francia">
			<img src="img/renault.png" alt="image">
		</div>

		<div class="francia">
			<img src="img/citroen.png" alt="image">
		</div>

		<div class="italia">
			<img src="img/ferrari.png" alt="image">
		</div>

		<div class="italia">
			<img src="img/fiat.png" alt="image">
		</div>
	</div>
</section>

<script type="text/javascript">

$(window).load(function(){
    var $container = $('.portfolioContenedor');
    $container.isotope({
        filter: '*',
        animationOptions: {
            easing: 'linear',
            queue: false
        }
    });

    $('.filtrar a').click(function(){
        $('.filtrar .actual').removeClass('actual');
        $(this).addClass('actual');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });
});

</script>

</body>
</html>