Как сделать портфолио?

Всем добрый вечер!
очень часто на сайтах встречаю такой вид портфолио premiumlayers.com/demos/vcard (раздел work).
fc69b3a9110845978dce274a827e5fe4.png
При нажатии на категорию отображаются только работы выбранной категории. При нажатии на All отображаются все работы.
В плане html оформления, нужные категории указываются в классах, например webdesign:
<li class="item col-md-4 webdesign ">	
Блок отображения одной работы
</li>

Ещё встречал варианты, где категория указывается не в классах, а в других data-параметрах у или . Кроме этого встречал варианты, где одно работу можно отнести сразу к нескольким категориям.

Явно есть какой то скрипт js, который позволяет делать такие решения. Никак не могу найти его. Может, кто сталкивался с этим? Заранее спасибо.
  • Вопрос задан
  • 4603 просмотра
Решения вопроса 3
IonDen
@IonDen
JavaScript developer. IonDen.com
Все просто: jsfiddle.net/b33wT

<div class="menu">
    Выбираем:
    <button class="btn" data-type="design">Дизайн</button>
    <button class="btn" data-type="html">Верстку</button>
    <button class="btn" data-type="php">Программирование</button>
    <button class="btn" data-type="all">Всё</button>
    <button class="btn" data-type="none">Ничего</button>
</div>

<div class="portfolio">
    <div class="item type_design">Дизайн 01</div>
    <div class="item type_design">Дизайн 02</div>
    <div class="item type_design">Дизайн 03</div>
    <div class="item type_html">Верстка 01</div>
    <div class="item type_html">Векстка 02</div>
    <div class="item type_html">Верстка 03</div>
    <div class="item type_php">Программирование 01</div>
    <div class="item type_php">Программирование 02</div>
    <div class="item type_design type_html">Дизайн + Верстка 01</div>
    <div class="item type_design type_html">Дизайн + Верстка 02</div>
</div>


var $buttons = $(".btn"),
    $items = $(".item"),
    type;

$buttons.on("click", function () {
    type = $(this).data("type");
    selectItems();
});

var selectItems = function () {
    switch (type) {
        case "all":
            $items.show();
            break;
        case "none":
            $items.hide();
            break;
        default:
            $items.hide();
            $items.filter(".type_" + type).show();
            break;
    }
};
Ответ написан
yuchiko
@yuchiko
Ответ написан
Комментировать
drugoj
@drugoj
---
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Так а на сайтах смотрели исходный код?
Ответ написан
Комментировать
@sabanovvv
тут используется js-плагин Isotope.(isotope.metafizzy.co/)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы