ここがおすすめ
Pinterest風グリッドがかんたんに実装できておすすめです。
グリッド実装系プラグインの大御所「Masonry」と比較すると、容量の軽さ(わずか1KB!!)と、jQueryに依存しない点が特長です。
Waterfall.js動作デモ
Waterfall.js公式サイト
導入方法
Waterfall.jsを使うには、
- 1.ファイルの取得と読み込み
- 2.htmlファイルへのプラグイン呼び出しの記述
- 3.htmlでのグリッド部分のコード記述
が必要になります。
以下、詳しく解説します。
必要ファイルの取得と読み込み
必要なファイルは
-
waterfall.min.js
waterfall.min.jsは上記「公式サイト」項目内Waterfall.js公式サイトよりダウンロードできます。
上記ファイルをhtmlに読み込ませます
<script src="//cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js"></script>
この例ではCDNを使って外部サーバーにあるファイルを読み込んでいます。
htmlファイルへのプラグイン呼び出しの記述
続いて、プラグインを呼び出すためのコードをhtmlファイルに記述します。
html内に記述する場合はscriptタグで囲んで、配置場所は上記jsファイル読み込みの記述より後ろに。
waterfall('.grid');
// or
var grid = document.querySelector('.grid');
waterfall(grid);
htmlでのグリッド部分のコード記述
最後にグリッド表示させたい箇所のhtmlコードを記述します。
上記プラグイン呼び出しにある.gridと下記htmlコードのグリッド部分を同じクラス名のタグで囲むのがポイントです。
<div class="grid">
<div class="item">Solid Snake</div>
<div class="item">Riou</div>
<div class="item">Jack Russel</div>
</div>
以上、Waterfall.jsの設定方法の説明でした。
オプション等は、上記公式サイトにて確認してください。