［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］のデモ : https://on-ze.com/demo/js-minimasonry/

オプション設定

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

名称 初期値 説明
container Null MiniMasonryを起動させる要素を指定
baseWidth 255 各アイテムの横幅
gutter 10 要素間の幅
minify true 各要素の順番を維持するか否か

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

［MiniMasonry.js］のデモ : https://on-ze.com/demo/js-minimasonry/