軽量シンプルでとても簡単なMasonryJSプラグイン (jQuery無しでOK!)

 

簡易ライブラリ[MiniMasonry.js]を使えば、jQueryを使わずに単体でMasonryを導入する事ができます。

 

簡単で理解しやすく、コピペもしやすいようシンプルにまとめてあります。

デモページは、こちら

[MiniMasonry.js]は以下のリンク先から入手できます。

GitHub : https://github.com/Spope/MiniMasonry.js/

使い方

まずhtmlに[MiniMasonry.js]を読み込みます。

head内でもbodyの閉めタグの直前でも構いません。

 

▼html

 

[MiniMasonry.js]を動かす要素は↓のように記述します。

個別にstyleでwidth、heightを付けて要素のサイズに差をつけてもも良いですし、もちろんcssでサイズ指定しても良いです。

▼html

 

次にJavaScriptで初期設定を記述。

bodyの閉めタグ直前でokです。

▼JavaScript

 

これだけです。

とても軽量でシンプルなので取り入れやすいのではないでしょうか?

今回、参考にさせていただいたのは、

『 オンズ開発ブログ 』さんです。ありがとうございます。

デモページは、こちら