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

taka_oj
|
2018年10月9日
| コメントはまだありません
| JavaScript

 

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

 

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

デモページは、こちら

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

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

使い方

まずhtmlに［MiniMasonry.js］を読み込みます。

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

 

▼html

<script src="minimasonry.min.js"></script>

 

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

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

▼html

<div class="masonry">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>

 

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

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

▼JavaScript

<script>
var masonry = new MiniMasonry({
container: '.masonry'
});
</script>

 

これだけです。

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

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

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

デモページは、こちら

JavaScript