[js]グリッド要素をフィルタリングできるIsotopeが便利


20151106-01

グリッド要素をフィルタリングできるIsotopeが便利だったのでブログでもシェア。

IT/WEB業界への転職なら求人サイトGreen

使い方

20151106-04

↑グリッド配置の際に、いい感じに配置されます。

20151106-06

↑幅を指定して配置可能

20151106-05

↑縦配置も可能

20151106-07

↑横配置も可能

1.jQueryとプラグインを有効にします。

使用するには、まずjQueryとIsotopeプラグインを有効にします。



4.コンテンツを設置

プラグインを有効にしたいグリッド要素を作成します。
親要素に「.grid」、その子要素となる各要素に「.grid-item」というクラス名を与えています。

...
...
...
...

4.CSS

CSSでグリッド要素の見た目を調整します。

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

プラグインのオプションを指定

$('.grid').isotope({
// options
itemSelector: '.grid-item',
layoutMode: 'fitRows'
});

これで設定は完了です。

動作デモ

実際の動作はぜひサイトからご確認ください。
http://isotope.metafizzy.co/

商用利用の場合には有料になるとの事なので、ライセンスにはご注意ください。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly