List & Grid Post Display

Использование плагина JQuery Masonry и JavaScript Cookies для создания системы переключения способов вывода контента в виде сетки или списка, при этом выбор запоминается браузером.

by Andrey Dobrovoi

HTML

<script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js"></script>
<script src="http://dte-project.googlecode.com/svn/trunk/cookie.js"></script>
<nav id="view">
    <a class="grid" href="#">Плитки</a>
    <a class="list" href="#">Список</a>
</nav>
<div id="main">
    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></article>    
    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p></article>
    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p></article>    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></article>    
    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p></article>
    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud.</p></article>
    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p></article>    
    <article><p>Lorem ipsum dolor sit amet, consectetuer adipiscing...

CSS

* {
    margin:0;
    padding:0;
}
body {
    font: 1em/1.3 "Trebuchet MS",Tahoma,Arial,sans-serif;
    background: #fff;
}
#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;
}

article {
    display:block;
    background:#fff;
    box-shadow: 2px 2px 4px 0 #ccc;
    border: 1px solid #efefef;
    color:#000;
    padding:10px 15px;
    margin:0 10px 10px;
}
article.list {
    width:100%;
}
article.grid {
    float:left;
    width:200px;
}

JavaScript

(function() {

    var $container = $('#main'),
        $article = $container.find('article'),
        $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();
        eraseCookie('grid');
    } else {
        listMode();
    }

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

})();