Красивое портфолио с помощью Quicksand

Всем добрый день! Сегодня я хочу познакомить вас с интересным jQuery плагином Quicksand, который позволяет создать красивое анимированное портфолио с изменением порядка отображения и фильтрацией. С помощью этого плагина вы можете сделать интересную фотогалерею или каталог продукции и услуг для вашего сайта. Ниже я привожу пример, как с помощью Quicksand выполнена галерея.

Просмотр Исходники

HTML

Сначала сделаем разметку нового документа HTML5. В разделе заголовка включим стиль страницы. Библиотека jQuery, плагин Quicksand и наш файл script.js будут включены перед закрывающимся тегом body:

<!DOCTYPE html>
<html>
head>
<meta charset="utf-8" />
<title>Портфолио на HTML5 | Материалы сайта RUSELLER.COM</title>
<!-- Наш файл CSS --> <link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Мое портфолио</h1> 
</header>
<nav id="filter">
<!-- Пункты меню будут располагаться здесь. Они генерируются кодом jQuery -->
</nav>
<section id="container">
<ul id="stage"> <!-- Пункты портфолио располагаются здесь --> </ul>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="assets/js/jquery.quicksand.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

Элемент HTML5 header содержит наш заголовок h1 (который оформлен как логотип). Элемент section содержит неупорядоченный список пунктов портфолио другие списки добавляются кодом jQuery)/ Элемент nav, оформленный как зеленая полоса, действует как фильтр содержания.

Неупорядоченный список #stage содержит пункты нашего портфолио. Каждый пункт имеет атрибут data, который определяет серию разделенных запятой меток. Позже, в коде jQuery, мы проходим циклом список, записываем метки и создаем категории, которые могут быть выбраны на зеленой полоске меню.

<li data-tags="Типографика">
<img src="assets/img/shots/1.jpg" alt="Иллюстрация" />
</li>

<li data-tags="Логотипы,Типографика">
<img src="assets/img/shots/2.jpg" alt="Иллюстрация" />
</li>

<li data-tags="Веб дизайн,Логотипы">
<img src="assets/img/shots/3.jpg" alt="Иллюстрация" />
</li>

Вы можете поместить в список пунктов другие работы и использовать другие метки.

jQuery

Плагин Quicksand сравнивает два неупорядоченных списка, находит одинаковые элементы li в них, и анимирует процесс расстановки. Скрипт jQuery, который разбирается в данной части урока, проходит циклом по пунктам портфолио в списке #stage и создает новые (скрытые) неупорядоченные списки для каждой найденной метки. Данные списки затем будут использоваться для работы плагина Quicksand.

После загрузки страницы мы запускаем цикл для обнаружения меток.

script.js – Часть 1

$(document).ready(function(){

 var items = $('#stage li'),
  itemsByTags = {};

 // Цикл по всем элементам li:

 items.each(function(i){
  var elem = $(this),
   tags = elem.data('tags').split(',');

  // Добавляем атрибут data-id. Требуется плагином Quicksand:
  elem.attr('data-id',i);

  $.each(tags,function(key,value){

   // Удаляем лишние пробелы:
   value = $.trim(value);

   if(!(value in itemsByTags)){
    // Создаем пустой массив для пунктов:
    itemsByTags[value] = [];
   }

   // Каждый пункт добавляется в один массив по метке:
   itemsByTags[value].push(elem);
  });

 });

Каждая метка добавляется в объект itemsByTags как массив. Значит, itemsByTags[‘Веб дизайн’] будет содержать массив всех пунктов, которые имеют метку ‘Веб дизайн’. Мы используем данный объект для создания скрытого неупорядоченного списка на странице для плагина Quicksand.

Создадим вспомогательные функции

script.js – Part 2

function createList(text,items){

 // Вспомогательная функция, которая получает текст кнопки меню и 
 // массив пунктов li

 // Создаем пустой неупорядоченный список
 var ul = $('<ul>',{'class':'hidden'});

 $.each(items,function(){
  // Создаем копию каждого пункта li 
  // и добавляем ее в список:

  $(this).clone().appendTo(ul);
 });

 ul.appendTo('#container');

 // Создаем пункт меню. Неупорядоченный список добавляется 
 // как параметр data (доступен через .data('list'):

 var a = $('<a>',{
  html: text,
  href:'#',
  data: {list:ul}
 }).appendTo('#filter');
}

Данная функция получает имя группы и массив с пунктами li как параметры. Затем она клонирует данные пункты в новый список ul и добавляет ссылку на зеленую полоску.

Теперь мы проходим циклом по всем группам и вызываем вспомогательную функцию, также добавляем обработку события click для пунктов меню.

script.js – Часть 3

// Создаем опцию "Все" в меню:
createList('Все',items);

// Цикл по массивам в itemsByTags:
$.each(itemsByTags,function(k,v){
 createList(k,v);
});

$('#filter a').live('click',function(e){
 var link = $(this);

 link.addClass('active').siblings().removeClass('active');

 // Используем плагин Quicksandдля анимации пунктов li.
 // Он использует data('list'), определённую нашей функцией createList:

 $('#stage').quicksand(link.data('list').find('li'));
 e.preventDefault();
});

$('#filter a:first').click();

CSS

Самая интересная часть стилей CSS — зеленая полоска #filter. Для нее используются псевдоэлементы :before / :after, чтобы создать привлекательные уголки по сторонам полоски. Так как они позиционируются абсолютно, то при изменении размеров полоски они выведутся там, где надо.

styles.css

#filter {
 background: url("../img/bar.png") repeat-x 0 -94px;
 display: block;
 height: 39px;
 margin: 55px auto;
 position: relative;
 width: 600px;
 text-align:center;

 -moz-box-shadow:0 4px 4px #000;
 -webkit-box-shadow:0 4px 4px #000;
 box-shadow:0 4px 4px #000;
}

#filter:before, #filter:after {
 background: url("../img/bar.png") no-repeat;
 height: 43px;
 position: absolute;
 top: 0;
 width: 78px;
 content: '';

 -moz-box-shadow:0 2px 0 rgba(0,0,0,0.4);
 -webkit-box-shadow:0 2px 0 rgba(0,0,0,0.4);
 box-shadow:0 2px 0 rgba(0,0,0,0.4);
}

#filter:before {
 background-position: 0 -47px;
 left: -78px;
}

#filter:after {
 background-position: 0 0;
 right: -78px;
}

#filter a{
 color: #FFFFFF;
 display: inline-block;
 height: 39px;
 line-height: 37px;
 padding: 0 15px;
 text-shadow:1px 1px 1px #315218;
}

#filter a:hover{
 text-decoration:none;
}

#filter a.active{
 background: url("../img/bar.png") repeat-x 0 -138px;
 box-shadow:	1px 0 0 rgba(255, 255, 255, 0.2),
    -1px 0 0 rgba(255, 255, 255, 0.2),
    1px 0 1px rgba(0,0,0,0.2) inset,
    -1px 0 1px rgba(0,0,0,0.2) inset;
}

Готово!

Вы можете использовать шаблон для своих проектов. Изменение содержания портфолио осуществляется просто. Если у пользователя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта.

Источник: http://easy-code.ru/lesson/beautiful-html-portfolio