Edit in JSFiddle

(function() {

    var $container = $('#main'),
        $article = $container.find('figure'),
        $gridNav = $('#view .grid'),
        $listNav = $('#view .list');

    // Functions...


    function gridMode() {
        $article.addClass('grid');
        $gridNav.addClass('active');
        $listNav.removeClass('active');
        $container.masonry({
            itemSelector: ".grid",
            isAnimated: true,
            isFitWidth: true
        });
        createCookie('grid', null, 7000);
        return false;
    }

    function listMode() {
        $article.removeClass('grid');
        $gridNav.removeClass('active');
        $listNav.addClass('active');
        $container.masonry("destroy");
        eraseCookie('grid');
        return false;
    }

    // Initialize...
    // If the 'grid' cookie reads
    if (readCookie('grid')) {
        gridMode();
        $(window).load(function() {
            $container.masonry("reload");
        });
        eraseCookie('grid');
    } else {
        listMode();
    }

    // By user...
    $listNav.click(listMode);
    $gridNav.click(gridMode);

})();

<nav id="view">
    <a class="grid" href="#">Grid</a>
    <a class="list" href="#">List</a>
</nav>
<div id="main">
    <figure><img src="http://lorempixel.com/200/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/100/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/120/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/80/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/100/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/120/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/80/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/100/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/120/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/80/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/100/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/120/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/80/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/100/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/120/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/80/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/100/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/200/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/120/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/80/100/animals/" alt="loading..."></figure>
    <figure><img src="http://lorempixel.com/200/200/animals/" alt="loading..."></figure>
</div>

* {
    margin:0;
    padding:0;
}

#view {
    display:block;
    width:95%;
    margin:10px auto;
}

#view a {
    display:inline-block;
    background-color:darkblue;
    padding:2px 7px;
    text-decoration:none;
    color:white;
}

#view a.active {
    background-color:darkred;
}

#main {
    width:98%;
    margin:10px auto;
}

figure {
    display:block;
    background-color:black;
    font:normal 11px Arial,Sans-Serif;
    color:white;
    padding:10px 15px;
    margin:0 2px 2px 0;
}

figure img {
    display:block;
    margin:0 auto;
}

figure.grid {
    float:left;
    width:auto;
    padding:2px;
}