jQuery

【jQuery】レスポンシブにも対応したグリッドレイアウトjQuery Masonry

December 22, 2016
jquery-masonry

jQuery Masonryはレスポンシブにも対応した、隙間なくタイル状に並べるグリッドレイアウトのためのjQueryプラグイン。

使用方法

<style type="text/css">
    .masonry {
        max-width: 1210px;
        margin: 0px auto;
        position: relative; }

</style>

<div class="masonry">   
    <div class="brick"> </div>
    <div class="brick"> </div>
    ...
</div>
$(".masonry").Masonry();

Callbacks

$(".masonry").Masonry({
    start : function () {
        $('.brick').css('background','#f00'); 
    },
    stop : function () {
        $('.brick').css('background','#000')
    },
});