【Isotope使い方】masonryより便利な、見た目を美しく整える「isoTope」を使ってみた！

2017年10月15日

masonryと似ているjavascriptパッケージで、isotopeが良さそうなので使ってみました。
以下のようにボックスレイアウトの調整がすごく簡単にできます。

screenshot.680

screenshot.681

では、masonryと何が違うのかというと、「並べ替え」「絞り込み」機能が容易に実装できるところになります。
今回は、まず初回の実装方法をまとめています。

デモを作りましたので、まずは触ってみてください。

[pb]Isotopeデモページ
2m3g1.com/demo/isotope/
[/pb]

・長方形またはテーブル要素（行）をきれいに並べてくれる。
・難易度が高いソート（並べ替え）機能を比較的簡単に実装できる。
・難易度が高いフィルタ（絞り込み）機能を比較的簡単に実装できる。

使用方法

以下のサイトにある「Download isotope.pkgd.min.js」をダウンロードして、
サーバーの適当な位置に格納します。（ここでは同じ階層に格納しています）

jQueryがあると操作が楽なので、使わくてもできますが、ここではjQueryを使用しています。

Googleのライブラリにリンクしています。

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>

親にid名またはクラス名を、子要素にクラス名を付けます。
ここでは、親にid="isotope"と、子にclass="element-item"と付けます。

CSSである程度の子要素の形や装飾は指定します。
スタイルシートで編集してください。

パッケージjS（isotope.pkgd.min.js）を動かすための初期化処理をファイルに記述します。
ここでは、外部JS化していますが、直接記述するのが一般的かもしれません。

例えば、シンプルなものだと以下のようなスクリプトです。
親はidでisotope、子はclassでelement-item、レイアウトモードはmasonryでカラム幅は100と初期化します。
※jQuery使用時の記述方法です。

$( function() {
  
  $('#isotope').isotope({
    itemSelector: '.element-item',
    masonry: {
      columnWidth: 100
    }
  });

});

これで、初期化が可能になりました。

あとはサイトを見つつ、並べ替えボタン、絞り込みボタン、要素追加ボタンなど必要な機能を追加してみてください。

実際にサイトでは、比較機能として使用しています。

デジタル一眼を１枚1枚のカードにまとめています。

[pb]カメラ選び＆購入のポイント
c-camera.com/all_ichigan_compare
[/pb]

【一眼カメラ比較】2014年発売の一眼カメラ全機種比較！カメラ選び＆購入のポイント

javascirpt、jQueryの知識が足りないと思った方は、まず書籍で勉強してみると理解やすいかもしれません。

おそらく一番理解しやすいjavascriptの本です。これでダメならあきらめるしか・・

posted with amazlet at 14.08.31

マイナビ (2012-03-24)
売り上げランキング: 21,763

posted with amazlet at 14.08.31

西畑一馬
アスキー・メディアワークス
売り上げランキング: 16,701

posted with amazlet at 14.08.31

高津戸壮
技術評論社
売り上げランキング: 43,276