Pinterest風サイトに役立つjQueryプラグイン

 

パネル要素を敷き詰めるプラグインをまとめました。

機能的には、どれも似たような感じなので、お好みでどうぞ。

 

Pinterest風サイトに役立つjQueryプラグイン

 

 

Isotope

Isotope

設定が豊富なjQueryプラグイン。
アニメーション機能や、要素の並び順を指定することも可能です。

http://isotope.metafizzy.co/

 

 

 

Wookmark

Wookmark

3KBと軽量。
一方で、設定はかなり簡素で、自動リサイズ、並び替える要素名、要素同士の隙間の広さ、要素の幅くらいしかオプションがありません。

http://www.wookmark.com/jquery-plugin

 

 

 

Nested

Nested

他のプラグインでは、各要素の高さや幅などの違いにより、ある程度の隙間ができてしまいますが、このプラグインは、一切の隙間を無くして、敷き詰めることが可能のようです。

http://suprb.com/apps/nested/

 

 

 

Grid-A-Licious

Grid-A-Licious

2008年にリリースという、この手のプラグインとしては最古の歴史を持つプラグインです。
最近、レスポンシブ対応となって再登場しました。
アニメーションや、アニメーション終了後のコールバックなど、基本的な機能が揃っています。
機能の割には、サイズが6KBと軽量です。

http://suprb.com/apps/gridalicious/

 

 

 

BlocksIt.js

BlocksIt.js

要素をランダムに並び替えたり、横のカラム数を指定したりできます。

http://www.inwebson.com/demo/blocksit-js/

 

 

 

Masonry

Masonry

この手のプラグインで、一番有名と思われるプラグイン。
アニメーションなど豊富な機能を持ってます。

http://masonry.desandro.com/