最近のレスポンシブ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


Isotope

ウィンドウサイズによってボックス要素の並びが変わだけでなく
フィルタやソートといった機能の他に
レイアウトも
——————————-
・masonry
・fitRows
・straightDown
——————————-
ボックスを隙間なく敷き詰めるパターンと
横並びパターン、縦並びパターンといった
数種類の中から選べるようになっています。

いろいろなパターンの中から
グリッドレイアウトを実装することが出来る
便利なプラグインかと思います。

最後は「jQuery Masonry」

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サイト設計の際に是非。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (5)

  • midori | 2015.06.17 11:31

    はじめまして。

    素人なのですが、グリッドレイアウトのプラグインを探していて、こちらのページにたどり着いた者です。
    Isotopeに関して1点ご質問させてくださいませ。

    TOPページでソートをかけている状態を「A」として、
    他の派生ページからTOPページの「A」の状態へリンクすることは可能なのでしょうか?

    ご教授いただければ幸いです。

  • BlackFlag | 2015.06.20 0:29

    >midoriさん
    このプラグインにそのようなオプションは付いていないかもしれませんが
    URLの後ろに「#」のついた番号をつけて
    その番号を判別してボタンをクリックさせることで可能になるのではないかと思っております。

    当ブログ別記事の
    http://black-flag.net/jquery/20101014-1597.html
    「2012.05.03 22:51」のコメント部分に
    同様の動作のサンプルを掲載しておりますので
    ご参考にしていただければと思っております。

    よろしくお願いします。

  • midori | 2015.06.22 15:20

    BlackFlag様

    お世話になっております。
    実装できました!
    大変感動しております。

    追加で1点ご質問させてくださいませ。

    「#」+「番号」の部分をリンク先では表示しないということは可能なのでしょうか?
    お手数をお掛けしますが、ご教授いただければ幸いです。
    何卒宜しくお願いいたします!

  • BlackFlag | 2015.06.23 0:25

    >midoriさん
    ひとまず動作が実装できたようで安心致しました。

    URLの表示部分については「#」を非表示にすることは厳しいかと思います。

    「#」等を表示しないで実装する場合は
    cookieなどで制御することになるかと思います。

    よろしくお願いします。

  • midori | 2015.06.23 12:48

    BlackFlag様

    早速のご返答ありがとうございます。
    cookieなんですね。。

    cookieについては全く知識がないので今後勉強していきます。

    ありがとうございました。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

グリッドレイアウトでのWebサイト構築に役立つjQueryプラグイン「BlocksIt.js」「Isotope」「jQuery Masonry」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR