jQuery

【jQuery】フレキシボックスを使ったMasonryレイアウト。Waterfall.js

April 23, 2016
Waterfall

Waterfall.jsは軽量のフレキシボックスを使ったMasonryレイアウトプラグイン。

jQuery

<script src="waterfall.min.js"></script>
</body>

使用方法

<div class="grid">
    <div class="item">Solid Snake</div>
    <div class="item">Riou</div>
    <div class="item">Jack Russel</div>
</div>

呼び出し

waterfall('.grid');
// or
var grid = document.querySelector('.grid');
waterfall(grid);

Responsive

window.addEventListener('resize', function () {
    waterfall(grid);
});

MITライセンス