グリッドレイアウト採用時に便利なjQueryプラグイン 20

  • Posted on
  • Category : Tips
グリッドレイアウト採用時に便利なjQueryプラグイン 20

有名どころだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。

一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。
また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用は有償とか高機能だけど商用・非商用問わず有償というプラグインも中にはあるので、使用する際はライセンス等を再度自身で確認してください。

各プラグインのサポートブラウザに関しては配布サイトの情報はもちろん、IE7やIE8(IETesterですが…)を確認した際の動きなども併せて載せてはいますが、プラグインによっては動きはするけどアニメーションがIEでは効かないというものもあります。
Testerでの確認もさらっとしかしていないので、IE7やIE8をサポートする場合であればライセンスだけでなく、動きやアニメーションが有効かなども再度自身で確認してください。
サポートブラウザに関して紹介している内容に間違いがある場合は、ご指摘いただければと思います。

Masonry

Masonry

サポートブラウザ:モダンブラウザ、IE8+

この手のプラグインの中でもかなり有名なものだと思いますし、自分も使わせてもらうことが多いプラグインです。
オプションも豊富ですし、「Infinite Scroll」と併せて実装してるブログなどもよく見かけます。
IEは8+ってなってますが、IE7でも特に崩れなく実装できると思います。

Isotope

Isotope

サポートブラウザ:モダンブラウザ、IE7+

同じく有名なプラグインで、フィルタリングやソートなどの機能も簡単に実装できます。

Packery

Packery

サポートブラウザ:モダンブラウザ、IE8+

jquery.vgrid.js

jquery.vgrid.js

サポートブラウザ:モダンブラウザ、IE7+

日本製プラグインで、ソートやドラッグ&ドロップなどのオプションもあります。

Wookmark jQuery Plugin

Wookmark jQuery Plugin

サポートブラウザ:モダンブラウザ、IE7+

DyLay

DyLay

サポートブラウザ:モダンブラウザ、IE9+

要素が動く際のアニメーションが弾むような感じになっているプラグインで、フィルタリングやソート機能もあります。

BlocksIt.js

BlocksIt.js

サポートブラウザ:モダンブラウザ、IE7+

jQuery Nested

jQuery Nested

サポートブラウザ:モダンブラウザ、IE9+

IE7はまともに動かなくて、IE8でも怪しい感じの印象です。

Grid—A—Liciou

Grid—A—Liciou

サポートブラウザ:モダンブラウザ、IE9+

同じくIE7、IE8では使わないほうがいいかも…。

stalactite

stalactite

サポートブラウザ:モダンブラウザ、IE7+

要素を遅延表示させることができます。

gridster.js

gridster.js

サポートブラウザ:モダンブラウザ、IE9+

他のプラグインのように要素を整列させるものではなく、要素をドラッグ&ドロップできるプラグイン。

Jquery.waterfall

Jquery.waterfall

サポートブラウザ:モダンブラウザ、IE7+

Columnizer

Columnizer

サポートブラウザ:モダンブラウザ、IE7+

jquery.diamonds.js

jquery.diamonds.js

サポートブラウザ:モダンブラウザ、IE9+

他のものとは少しタイプが違うもので、ダイアモンド状に並べることができるプラグイン。
矩形に飽きたなどに。

jQuery.Shapeshift

jQuery.Shapeshift

サポートブラウザ:モダンブラウザ、IE9+

要素のドラッグ&ドロップも可能です。

Freewall

Freewall

サポートブラウザ:モダンブラウザ、IE7+

Shuffle.js

Shuffle.js

サポートブラウザ:モダンブラウザ、IE7+

フィルタリングやソートなどの機能も実装できます。

jQuery CollagePlus

jQuery CollagePlus

サポートブラウザ:モダンブラウザ、IE9+

一応IE8でも動くといえば動くけど、かなり怪しい感じなのでIE9以下では使わないほうが無難です。

Responsive Tile Gallery

Responsive Tile Gallery

サポートブラウザ:モダンブラウザ、IE7+

有償ですがIE7でも問題なく動き、フィルタリング機能もあります。

Megafolio Gallery jQuery Plugin

Megafolio Gallery jQuery Plugin

サポートブラウザ:モダンブラウザ、IE7+

こちらも同じく有償プラグインですが、IE7でも問題なく動き、フィルタリング機能もあります。

以上、グリッドレイアウト採用時に便利なjQueryプラグインのまとめでした。
他のブログでも紹介されていることが多いですし、使いやすさとか動きの好みとかで結局自分がよく使うのは「Masonry」とか「Isotope」辺りなんですけど、弾むようなモーションがつく「DyLay」や遅延表示できる「stalactite」なども上手く使えば素敵なサイトができそうです。

Back to Top

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。