1

可変グリッドレイアウトを実装できるMasonry

可変グリッドレイアウトを実装できるMasonry

 

可変グリッドレイアウトとは、ブラウザの幅に応じてコンテンツのレイアウトを調整し整列してくれる仕様のことを指します。有名なサイトで言えば「pinterest」などがそうですが、この可変型のグリッドを簡単に実現できるjQueryプラグイン「Masonry」をご紹介します。

まずは、この可変グリッドを採用しているサイトを見てみましょう。

 

 

Pinterest

Pinterest

 

D&DEPARTMENT PROJECT

D&DEPARTMENT PROJECT

 

SUPER ME INC.

SUPER ME INC.

 

東京 デザイン事務所 サガ

東京 デザイン事務所 サガ

 

ブラウザの横幅を変える度にカラム数が変化し、コンテンツが移動しながら再配置される仕様になっています。

 

▼それでは、実際に作りながら見ていきましょう。

まずは、本家「Masonry」より「masonry.pkgd.min.js」をダウンロードしてください。

Masonry

 

Masonryとは…「れんが・石組・積石」などの意味があるようです。グリッドレイアウトがレンガを積み上げたようなビジュアルになっているため、このような名前が付いているようですね。

 

download

実際にサンプルを用意しましたので確認していきましょう。

 

DEMO

demo-img

jQueryと「masonry.pkgd.min.js」を読み込む

 

JavaScriptを記述

 

HTMLを記述

 

CSSを記述

 

以上で完成です。

DEMO

demo-img

 

その他にも、いくつかのオプションがあるのでカスタマイズしてみてください。

 

オプション

●itemSelector

処理対象となる要素のclass名を指定する

●isAnimated

ウィンドウサイズを変更した際のレイアウト変更時のアニメーションの可否。デフォルトはfalse

●isFitWidth

containerのサイズを列幅に合わせて変更するかどうか。

●columnWidth

一列の幅を指定

●gutterWidth

要素間の幅の指定

●isResizable

ブラウザのウィンドウサイズが変わったときに並び替えをするかどうか。デフォルトはtrue

●isRTL

左上から右下に視線を動かすようなレイアウト対応にするかどうか。デフォルトはfalse

●animationOptions

アニメーションオプションを設定

 

詳しくは、本サイトのオプションをご確認ください。

options-img




One Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 可変グリッドレイアウトを実装できるMasonry