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

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

適用前

screenshot.680

適用後

screenshot.681

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

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

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

導入のメリット

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

使用方法

1.パッケージjsをダウンロードしてサーバーに格納する

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

Isotope
isotope.metafizzy.co/

2.必要に応じて、jQueryを導入する

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

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

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

3.並べ替え範囲(親)と要素(子)にid名またはクラス名を付ける

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

4.CSSを調整する

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

5.JSを記述する

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

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

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

});

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

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

実際に使ったサイト

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

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

カメラ選び&購入のポイント
c-camera.com/all_ichigan_compare

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

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

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

よくわかるJavaScriptの教科書 (教科書シリーズ)
マイナビ (2012-03-24)
売り上げランキング: 21,763
Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)
西畑一馬
アスキー・メディアワークス
売り上げランキング: 16,701

あなたにオススメ(Amazon)

あなたにオススメ(楽天)