1

レスポンシブ CSS グリッドと石積みを使用しています。css グリッドの余白は .wrapper のサイズによって変化するため、css ファイルでガターの値を設定し、jquery で値を取得できるかどうか疑問に思っていました

石積みjs

jQuery(document).ready(function($){

    var $container = $('.wrapper');
    //get the value from .gutter in css file
    var $gutter = parseInt($('.gutter').css('margin'), 10);

    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.container',
            singleMode:true,
            isAnimated:true,
            gutterWidth: gutter
        });
    });
});

CSS:

@media only screen and (min-width:1200px) {
.gutter {margin:20px}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
.gutter {margin:10px}
}
4

0 に答える 0