グリッドレイアウトでのWebサイト構築に役立つjQueryプラグイン「BlocksIt.js」「Isotope」「jQuery Masonry」
最近のレスポンシブWebデザインの影響もあって
ボックスをタイル状に並べた構成のグリッドレイアウトWebサイトをよく見かけます。
ウィンドウサイズによって最適な配置で画面を構成できたりするグリッドレイアウトですが
jQueryを使って簡単に実装することができるプラグインを自分用メモとして紹介してみます。
まずは「BlocksIt.js」
BlocksIt.js
BlocksIt.js | Dynamic Grid Layout jQuery Plugin – Plugin Page
デモページはこちら
BlocksIt.js Demonstration #1 – Random Dynamic Grid Layout
BlocksIt.js Demonstration #2 – Pinterest Dynamic Grid Layout with CSS3 Transitions
ページをロードするたびにランダムでグリッドレイアウトが切り替わる
【#1-Random Dynamic Grid Layout】と、
Pinterestの様なレイアウトでウィンドウサイズを変えるたびにレイアウトが切り替わる
【#2-Pinterest Dynamic Grid Layout with CSS3 Transitions】の
2種類用意されています。
Pinterestの様なレイアウト構成は今後も需要が増えていきそうな気がしているので
このプラグインはとても重宝しそうです。
続いては「Isotope」
Isotope
ウィンドウサイズによってボックス要素の並びが変わだけでなく
フィルタやソートといった機能の他に
レイアウトも
——————————-
・masonry
・fitRows
・straightDown
——————————-
ボックスを隙間なく敷き詰めるパターンと
横並びパターン、縦並びパターンといった
数種類の中から選べるようになっています。
いろいろなパターンの中から
グリッドレイアウトを実装することが出来る
便利なプラグインかと思います。
最後は「jQuery Masonry」
jQuery Masonry
言わずと知れた「jQuery Masonry」。
このjQueryプラグインを使って数々のWebサイトがグリッドレイアウトを実現しています。
デモパターンでは
——————————-
【Demos】
・Basic single-column
・Basic multi-column
・Images
・Tumblelog example
・Animating with jQuery
・Animating with CSS Transitions
・Animating with Modernizr
・Adding items
・Infinite Scroll
・Gutters
・Right-to-left
・Centered
・Fluid
・Corner stamp
——————————-
といったシンプルに切り替わるものから
アニメーションを付けて配置が切り替わるものまで様々です。
3年ほど前にここでもこのプラグインを紹介しましたが
その頃はここまでグリッドレイアウトが注目されるとは思っていませんでした・・・
・jQueryでFloatしたボックスを整列させる「jQuery Masonry」
・jQuery Masonryを使ってグリッドレイアウトを実現しているWebサイト集「25 Powerful Examples of Masonry jQuery Web Design」
以上、グリッドレイアウトでのWebサイト設計の際に
役立つjQueryプラグイン3種でした。
グリッドレイアウトWebサイト設計の際に是非。。。
はじめまして。
素人なのですが、グリッドレイアウトのプラグインを探していて、こちらのページにたどり着いた者です。
Isotopeに関して1点ご質問させてくださいませ。
TOPページでソートをかけている状態を「A」として、
他の派生ページからTOPページの「A」の状態へリンクすることは可能なのでしょうか？
ご教授いただければ幸いです。
＞midoriさん
このプラグインにそのようなオプションは付いていないかもしれませんが
URLの後ろに「#」のついた番号をつけて
その番号を判別してボタンをクリックさせることで可能になるのではないかと思っております。
当ブログ別記事の
http://black-flag.net/jquery/20101014-1597.html
「2012.05.03 22:51」のコメント部分に
同様の動作のサンプルを掲載しておりますので
ご参考にしていただければと思っております。
よろしくお願いします。
BlackFlag様
お世話になっております。
実装できました！
大変感動しております。
追加で1点ご質問させてくださいませ。
「#」+「番号」の部分をリンク先では表示しないということは可能なのでしょうか？
お手数をお掛けしますが、ご教授いただければ幸いです。
何卒宜しくお願いいたします！
＞midoriさん
ひとまず動作が実装できたようで安心致しました。
URLの表示部分については「#」を非表示にすることは厳しいかと思います。
「#」等を表示しないで実装する場合は
cookieなどで制御することになるかと思います。
よろしくお願いします。
BlackFlag様
早速のご返答ありがとうございます。
cookieなんですね。。
cookieについては全く知識がないので今後勉強していきます。
ありがとうございました。