jQuery

【jQuery】水平方向にタイル状のレイアウトを作成するためのMasonry

September 26, 2016
Masonry

Masonryは水平方向にタイル状のレイアウトを作成するためのjQueryプラグイン。

Javascript

$(document).ready(function() {
    $('div#masonry').masonry({rowMinAspectRatio: 3.3});
});

Markup

<div id="masonry">
    <a href="image01-large.jpg" target="_blank"><img src="image-01.jpg" width="2048" height="1369"/></a>
    <a href="image02-large.jpg" target="_blank"><img src="image02.jpg" width="2048" height="1280"/></a>
    ...
    <a href="image99-large.jpg" target="_blank"><img src="image99.jpg" width="1370" height="2048 /></a>
</div>

CSS

<style>
    box-sizing: border-box;
    border: 2px solid #fff;
</style>

MITライセンス