【JavaScript】超便利「Masonry」の簡易版[MiniMasonry.js]の使い方

Ads by Google

[MiniMasonry.js]は有名なMasonryの機能を制限した簡易版のライブラリです。
データ容量も軽く、jQueryなどに依存せず単体で動くので便利です。
使い方は以下より。

Sample : https://projects.spope.fr/masonry/example/index.html
GitHub : https://github.com/Spope/MiniMasonry.js/

基本的な使い方

HTMLの適当な個所で「minimasonry.min.js」を読み込みます。

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

[MiniMasonry.js]を動かす各要素は次のようにマークアップします。

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

さらにJavaScriptで初期設定を記述。

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

以上、これだけで動くようになります。

サンプルを用意したので実際の挙動を確認してみてください。

[MiniMasonry.js]のデモ : http://on-ze.com/demo/js-minimasonry/

オプション設定

簡易版なのでオプション設定のパラメーターは4つだけになっています。

名称初期値説明
containerNullMiniMasonryを起動させる要素を指定
baseWidth255各アイテムの横幅
gutter10要素間の幅
minifytrue各要素の順番を維持するか否か

必要最低限のオプション項目に制限されていますが、特に複雑な設定が必要ないのであれば、通常の[
Masonry.js]の代替として充分に使えると思います。
この機会に導入を検討してみてはいかがでしょうか?

[MiniMasonry.js]のデモ : http://on-ze.com/demo/js-minimasonry/

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google