HTMLをレスポンシブなグリッド上でソート、フィルタリングする「Shuffle.js」

「Shuffle.js」はHTMLエレメントをレスポンシブが取り込まれたグリッド上でソート、フィルタリングを実現するjQueryプラグインです。

Shuffle.js

shuffle-js

今作っていたWebサービスに取り入れたかったのでエントリー。異なるサイズのエレメントを含んでいてもグリッドレイアウトでソーティングしてくれます。またカテゴリによるフィルタリングも可能です。アニメーションもスムーズで良い感じ。

 

まずはこの状態から作成日付順にソートしてみます。

shuffle-js-demo-1

 

画像だけ見ても変わっているところしかわかりませんが、アニメーションがかっこいいです。

shuffle-js-demo-2

 

このようにフィルタリングも可能です。”Graphic Design”でフィルタリングしてみました。

shuffle-js-demo-3

 

 

それでは「Shuffle.js」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="jquery.shuffle.min.js"></script>

 

HTMLはこのようにマークアップします。今回はソート機能を実装してみます。selectタグでソート要素を用意し、それぞれのfigureタグでソート要素のデータを与えます。

<select class="sort-options">
  <option value="">Default</option>
  <option value="title">Title</option>
  <option value="date-created">Date Created</option>
</select>

<div id="grid" class="row-fluid">
  <figure  class="span3 picture-item" data-groups='["group1"]' data-date-created="2013-02-01" data-title="ddd">
    <img src="test1.jpg" height="180" width="250" />
  </figure>
  <figure  class="span3 picture-item" data-groups='["group2"]' data-date-created="2013-07-01" data-title="ccc">
    <img src="test2.jpg" height="180" width="250" />
  </figure>
  <figure  class="span3 picture-item" data-groups='["group2"]' data-date-created="2013-04-01" data-title="bbb">
    <img src="test3.jpg" height="180" width="250" />
  </figure>
  <figure  class="span3 picture-item" data-groups='["group3"]' data-date-created="2013-05-01" data-title="aaa">
    <img src="test4.jpg" height="180" width="250" />
  </figure>
</div>

 

JavaScriptはこのように実装します。

$(document).ready(function() {
  var $grid = $('#grid');

  $grid.shuffle({
    itemSelector: '.picture-item'
  });

  // Sorting options
  $('.sort-options').on('change', function() {
    var sort = this.value,
        opts = {};

    // We're given the element wrapped in jQuery
    if ( sort === 'date-created' ) {
      opts = {
        reverse: true,
        by: function($el) {
          return $el.data('date-created');
        }
      };
    } else if ( sort === 'title' ) {
      opts = {
        by: function($el) {
          return $el.data('title').toLowerCase();
        }
      };
    }

    // Filter elements
    $grid.shuffle('sort', opts);
  });
});

 

するとこのように作ることができました。

shuffle-js-sample-1

Titleでソートするとアニメーションを伴って、このように画像が並び替わります。

shuffle-js-sample-2

 

アニメーションがサクサクで気持ちいいです。色々なWebサービスに使えそうですね。参考にどうぞ。

 

Home > JavaScript > HTMLをレスポンシブなグリッド上でソート、フィルタリングする「Shuffle.js」

Return to page top