可変グリッドを簡単に実装できるjQueryプラグイン「Masonry」!

2014/12/13

こんにちは。
今回は可変グリッドを簡単に実装できるjQueryプラグイン「Masonry」!です。

高さが同じ要素のボックスだけだとCSSだけでもできますが、高さが違う要素の場合は難しいですね。
そんな時はこのプラグインを使うと簡単に実装できまし、アニメーションも追加できます。

可変グリッドを簡単に実装できるjQueryプラグイン「Masonry」!

まずはダウンロードしてみよう!

下記のリンクをクリックして、Masonryのサイトに行き、「Download masonry.pkgd.min.js」のボタンをクリックし、ダウンロードします。

Masonry

masonry

http://masonry.desandro.com/

 

設置してみよう!

jQuery本体とmasonry.pkgd.min.jsを/bodyの手前に読み込みます。

 

その下に下記の記述をします。

 

CSSを記述します。

 

html部分は下記のように記述します。

 

デモは下記をクリックして下さい。

DEMO

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。簡単ですね。
以上で可変グリッドを簡単に実装できるjQueryプラグイン「Masonry」!でした。

topへ戻る