WEBデザインの勉強

WEB制作初心者が1から勉強するブログ。

グリッドレイアウトをソート、フィルタリングできるjQueryプラグイン Isotope

f:id:mmmmofu:20170717195908p:plain

デモ
http://efu.sakura.ne.jp/web/isotope/

公式サイト
isotope.metafizzy.co

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Isotope</title>
  <link rel="stylesheet" href="http://efu.sakura.ne.jp/web/common/css/reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="isotope.pkgd.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <ul class="filter">
    <li class="filter__item current" data-filter="*">ALL</li>
    <li class="filter__item" data-filter=".cate--01">Category1</li>
    <li class="filter__item" data-filter=".cate--02">Category2</li>
    <li class="filter__item" data-filter=".cate--03">Category3</li>
  </ul>
  <ul class="list">
    <li class="list__item cate--01">Category1</li>
    <li class="list__item cate--03">Category3</li>
    <li class="list__item cate--01">Category1</li>
    <li class="list__item cate--02">Category2</li>
    <li class="list__item cate--03">Category3</li>
    <li class="list__item cate--02">Category2</li>
    <li class="list__item cate--01">Category1</li>
    <li class="list__item cate--02">Category2</li>
    <li class="list__item cate--01">Category1</li>
    <li class="list__item cate--03">Category3</li>
  </ul>
</body>
</html>
@charset "utf-8";

.filter {
  margin: 20px 0;
  text-align: center;
}

.filter .filter__item {
  display: inline-block;
  padding: 5px;
  border: 2px solid #FFF;
}

.filter .filter__item.current {
  background: rgba(0,0,0,0.2);
}

.list {
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
}

.list .list__item {
  width: 33.333%;
  height: 200px;
  background: #FFF;
  border: 2px solid #FFF;
  box-sizing: border-box;
  background: rgba(0,0,0,0.2);
}
$(function(){

  $('.filter__item').on('click', function(){
    $('.filter__item').removeClass('current');
    $(this).addClass('current');

    var selector = $(this).attr('data-filter');
    $('.list').isotope({
      filter: selector,
      animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
      }
    });
    return false;
  });

});

$(window).on('load', function(){

  $('.list').isotope({
    itemSelector: '.list__item',
    // masonry: {
    //   columnWidth: 600
    // }
  });

});
||< 

関連記事
[http://mmmmofu.hatenablog.com/entry/2017/02/06/011908:embed:cite]

[http://mmmmofu.hatenablog.com/entry/2015/08/22/202919:embed:cite]