[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope

ブラウザごとに最適な方法を使って、ダイナミックなアニメーションでレイアウト変更やデータのフィルタリング・ソートを行うjQueryのプラグインを紹介します。

Isotope: An exquisite jQuery plugin for magical layouts

[ad#ad-2]

まずは、そのダイナミックなアニメーションが体験できるデモからご紹介。

Demo: Basic
Isotopeの機能が分かる最もベーシックなデモです。
ブラウザのサイズを変更すると、それにあわせてレイアウトがアニメーションで変更されます。

Demo: Layout modes
各パネルをmasonry（レンガ状）に配置したレイアウト。ブラウザのサイズ変更だけでなく、「Layout modes」からさまざまなレイアウトのパターンに変更できます。

Demo: Layout modes
「Layout modes」の「masonryHorizontal」を選択すると、同じmasonry（レンガ状）ながら水平方向に配置したレイアウトになります。

[ad#ad-2]

Demo: Filtering
フィルタリングのデモです、それぞれのボタンをクリックすると、各データの表示・非表示・配置をアニメーションで楽しめます。

Demo: Sorting
ソートのデモです。これも同様に各ボタンをクリックすると、それぞれのソートをアニメーションで楽しめます。

Demo: images
IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。

Isotopeの特徴

• レイアウト モード：

  CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。

• フィルタリング：

  jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。

• ソート：

  あらゆるデータからソートが行えます。

• 各機能の互換性：

  レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。

• 最適化：

  Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。

Isotopeの実装

実装は、Layout modesを例に説明します。

パネルは普通のdiv要素で実装されており、スクリプトで指定することでさまざまなレイアウトに対応できます。

HTML

<div id="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

JavaScript: masonry

$('#container').isotope({
  masonry : {
    columnWidth : 240
  }
});

JavaScript: masonryHorizontal

$('#container').isotope({
  masonryHorizontal : {
    rowHeight : 360
  }
});

上記は紹介したデモのスクリプトになります。他のデモもサイトには解説があります。

• Docs: Layout modes

Isotopeのドキュメントは、下記ページにまとまっています。

• Isotope Docs