[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Post on:2012年8月14日
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-01.png)
Wookmark
高さの異なる要素を隙間なくレンガ状に配置するだけのシンプルなスクリプト。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-06.png)
Masonry
アニメーションでレイアウトをダイナミックに変更する先駆けとなったスクリプト。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-03.png)
Gridster
パネルをグリッドに沿ってドラッグ&ドロップで移動し、レイアウトを自由に構築できます。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-04.png)
Sliding Resizable Grid
ブラウザのサイズを変更すると、それに伴いレイアウトをアニメーションで変更します。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-05.png)
Isotope
ダイナミックなアニメーションでレイアウトの変更やデータのフィルタリング・ソートをします。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-08.png)
Customizable layout
ページ上のコンテンツをドラッグ&ドロップで移動し、それをクッキーに保存します。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-10.png)
Flex
グリッドに沿ったままアニメーションでパネルを拡大表示します。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-02.png)
grrrid
異なる高さのdiv要素を揃えるだけでなく、均等割付やピクセル単位でグリッドに揃えます。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-07.png)
Equal Heights
高さの異なるdiv要素を同じ高さにします。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-09.png)
Baseline
画像をベースラインに揃えて配置します。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-11.png)
PageSlide
ページ全体を横にスライドし、隠されたコンテンツやリンク先のページを表示します。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-12.png)
Slide Note
FacebookのRecommendations Barのように、ページをスクロールするとパネルをアニメーションで表示します。
![デモのキャプチャ](/wp-content/uploads-2012/2012081401-13.png)
The Heads-Up Grid
レスポンシブデザインにも対応した、確認用のグリッドをオーバーレイで表示します。
sponsors