$(window).load(function(){

      var 
        speed = 1000,   // animation speed
        $wall = $('#demo').find('.wrap')
      ;

      $wall.masonry({
        columnWidth: 5, 
        // only apply masonry layout to visible elements
        itemSelector: '.box:not(.invis)',
        animate: true,
        animationOptions: {
          duration: speed,
          queue: false
        }
      });

      $('#filtering-nav a').click(function(){
        var colorClass = '.' + $(this).attr('class');

        if(colorClass=='.all') {
          // show all hidden boxes
          $wall.children('.invis')
            .toggleClass('invis').fadeIn(speed);
        } else {  
          // hide visible boxes 
          $wall.children().not(colorClass).not('.invis')
            .toggleClass('invis').fadeOut(speed);
          // show hidden boxes
          $wall.children(colorClass+'.invis')
            .toggleClass('invis').fadeIn(speed);
        }
        $wall.masonry();

        return false;
      });

    });