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

Question

[Артём Сысолятин]

Всем добрый вечер!
очень часто на сайтах встречаю такой вид портфолио premiumlayers.com/demos/vcard (раздел work).

При нажатии на категорию отображаются только работы выбранной категории. При нажатии на All отображаются все работы.
В плане html оформления, нужные категории указываются в классах, например webdesign:

<li class="item col-md-4 webdesign ">	
Блок отображения одной работы
</li>

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

Явно есть какой то скрипт js, который позволяет делать такие решения. Никак не могу найти его. Может, кто сталкивался с этим? Заранее спасибо.

Answer 1

[Денис Инешин]

Все просто: 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;
    }
};

Comments

[sim3x]

скопируйте код в ответ

[Arris]

Изящно. Спасибо за науку :)

[Артём Сысолятин]

Огромное спасибо!

[Илья Петровский]

великолепно! разве что fade сделать )

Answer 2

[yuchiko]

держи
tympanus.net/codrops/2012/01/09/filter-functionali...

Answer 3

[M S]

и вот еще: web-forsite.ru/articulate-shablon-dlia-portfolio-i...

Answer 4

[Юрий Лобанов]

Так а на сайтах смотрели исходный код?

Answer 5

[sabanovvv]

тут используется js-плагин Isotope.(isotope.metafizzy.co/)