jQueryプラグインIsotopeの使い方(フィルター、ソート)

jQueryプラグインIsotopeの使い方を紹介します。

IsotopeはMetafizzy社が開発している、グリッド上のアイテムをフィルター・ソート・レイアウトするJavaScriptライブラリです。ボタンのdata-filter属性にクラス名を書き、isotope({ filter })に渡すだけで絞り込みができます。現行のIsotope v3はjQueryなしでもnew Isotope()で初期化でき、商用サイトで使う場合は有料のCommercial Licenseが必要です。

jQueryプラグインIsotopeの使い方

公式サイト：https://isotope.metafizzy.co/

jQueryのダウンロード

IsotopeはjQueryのプラグインのため、jQueryを使えるようにしておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

isotope.pkgd.min.jsファイルのダウンロード

Download isotope.pkgd.min.jsというボタンがあるのでそれをクリックするとminファイルのコードが確認できます。
それをコピーして、isotope.jsなどとしてファイルを作成し、プロジェクトのフォルダに配置します。

ダウンロードせずCDNから読み込むなら、次の1行で済みます。npmを使う場合はnpm install isotope-layoutでインストールします。

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>

html

<section class="portfolio" id="portfolio">
  <div class="portfolio__container">
    <h2 class="heading-secondary">Portfolio</h2>
    <div class="portfolio__buttons isotope-filter">
      <button class="button small" data-filter="*">All</button>
      <button class="button small" data-filter=".web-design">Web Design</button>
      <button class="button small" data-filter=".graphics-design">Graphics Design</button>
      <button class="button small" data-filter=".brand">Brand</button>
    </div>
    <div class="portfolio__images">
      <img src="../dist/img/portfolio-1.jpg" alt="" class="portfolio__image brand">
      <img src="../dist/img/portfolio-2.jpg" alt="" class="portfolio__image web-design">
      <img src="../dist/img/portfolio-3.jpg" alt="" class="portfolio__image graphics-design">
      <img src="../dist/img/portfolio-4.jpg" alt="" class="portfolio__image brand">
      <img src="../dist/img/portfolio-5.jpg" alt="" class="portfolio__image web-design">
      <img src="../dist/img/portfolio-6.jpg" alt="" class="portfolio__image brand">
    </div>
  </div>
</section>

クラス名はjsで指定すればいいので、なんでもかまいません。
上の場合だと、isotope-filterというのが、buttonのコンテナにあたります。
そのボタンには、data-filterという属性を付与して、そのプロパティにクラス名を書きます。すべての場合は、アスタリスク(*)を書きます。

注意点として、data-filter属性の値にはクラスを表すピリオド(.)を忘れずに記載してください。

portfolio__imagesクラスというのが、フィルター対象となる画像のコンテナになります。
そして、portfolio__imageというのが、フィルターされるアイテムになります。
フィルターされるアイテムには、button要素のdata-filter属性で指定した値をクラス名として記述します。

jsファイル

var $grid = $('.portfolio__images').isotope({
  // options
  itemSelector: '.portfolio__image',
  // layoutMode: 'fitRows'
});

// filter items on button click
$('.isotope-filter button').on( 'click', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

フィルターの対象となるアイテムの親要素となるクラス名を指定し、それにisotope({})をつなげます。
itemSelectorに指定するクラスが、フィルターされるアイテムになります。

下部では、フィルターをするときのボタン要素を指定します。上の場合だと、.isotope-filterクラスの中のbutton要素となります。
それがクリックされたら、data-filter属性の値と一致するアイテムだけを残してフィルターできます。

jQueryを使わずに初期化する

Isotope v3はjQueryに依存していないので、jQueryを読み込まないページでは次のように書きます。フィルターはarrange()に渡します。

var grid = document.querySelector('.portfolio__images');
var iso = new Isotope(grid, {
  itemSelector: '.portfolio__image',
});

document.querySelectorAll('.isotope-filter button').forEach(function (button) {
  button.addEventListener('click', function () {
    iso.arrange({ filter: button.getAttribute('data-filter') });
  });
});

ソートの設定

ソートは、初期化時のgetSortDataで「何を基準に並べるか」を定義し、sortByで基準を切り替えます。
getSortDataの値には、アイテム内の要素のセレクタ、属性名、または関数を指定できます。数値として比較したいときはセレクタの後ろにparseIntやparseFloatを付けます。

var $grid = $('.portfolio__images').isotope({
  itemSelector: '.portfolio__image',
  getSortData: {
    name: '[data-name]',          // data-name属性の値
    year: '[data-year] parseInt', // data-year属性を数値として比較
  },
  sortBy: 'name',                 // 初期表示のソート基準
  sortAscending: true,            // falseにすると降順
});

// ソートボタン（data-sort-by="name" などを付けたbutton）
$('.isotope-sort button').on('click', function () {
  var sortByValue = $(this).attr('data-sort-by');
  $grid.isotope({ sortBy: sortByValue });
});

sortByに配列を渡すと複数キーでのソートになり、sortAscendingはキーごとに{ name: true, year: false }のように指定することもできます。
フィルターとソートは同時に指定できるので、$grid.isotope({ filter: '.brand', sortBy: 'year' })のようにまとめて渡しても動きます。

フィルター用のボタン群とは別に、アイテムの登場演出を加えたい場合は、同じくjQueryから使えるTyped.jsでテキストを1文字ずつ表示する方法と組み合わせるとポートフォリオ風のページが作りやすくなります。