Bootstrap4のカードを隙間なく自動整列させる

ブロック要素を自動整列させるときの定番「Masonry」、Bootstrap4でも部分的につかうことはあったのですがBootstrap4を「カード」を「Masonry」で制御する方法を解説しているサイトがありましたので参考にページを作ってみました。

参考サイト　Bootstrap4のCardsとMasonry.jsの相性が最強だった件

JSの読み込み（CDN）

まずはブートストラップのページに「Masonry」を読み込みます

<script src="https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js"></script>

1	<script src="https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js"></script>

そこに実行コードを追加

$(function(){
   //読み込み完了後0.2秒待ってからmasonryする
    var cnt = 0;
    var waiting = setInterval(function(){
        if(cnt == 1) {

            $('.grid-index').masonry({
                itemSelector: '.grid-item',
                columnWidth: '.grid-sizer',
                percentPosition: true
            });

            clearInterval(waiting);
        }
        cnt++;
        }, 200);
});

$(function(){

//読み込み完了後0.2秒待ってからmasonryする

var cnt = 0;

var waiting = setInterval(function(){

if(cnt == 1) {

$('.grid-index').masonry({

itemSelector: '.grid-item',

columnWidth: '.grid-sizer',

percentPosition: true

});

clearInterval(waiting);

}

cnt++;

}, 200);

});

サイトでは2種類のコードが解説されていますが動作遅延処理の入った上記コードがおすすめです。

</body>の前のコードはこんな感じ。

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Masonry -->
<script src="https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js"></script>
<script>
$(function(){
   //読み込み完了後0.2秒待ってからmasonryする
    var cnt = 0;
    var waiting = setInterval(function(){
        if(cnt == 1) {

            $('.grid-index').masonry({
                itemSelector: '.grid-item',
                columnWidth: '.grid-sizer',
                percentPosition: true
            });

            clearInterval(waiting);
        }
        cnt++;
        }, 200);
});
</script>

$(function(){

//読み込み完了後0.2秒待ってからmasonryする

var cnt = 0;

var waiting = setInterval(function(){

if(cnt == 1) {

$('.grid-index').masonry({

itemSelector: '.grid-item',

columnWidth: '.grid-sizer',

percentPosition: true

});

clearInterval(waiting);

}

cnt++;

}, 200);

});

</script>

HTMLの違い

通常のカードの基本

<div class="container my-5">
<div class="row">


<div class="col-12 col-sm-6 col-lg-3">
カードの内容①
</div>

<div class="col-12 col-sm-6 col-lg-3">
カードの内容②
</div>

<div class="col-12 col-sm-6 col-lg-3">
カードの内容③
</div>

・・・


</div><!-- /.row -->
</div><!-- /.container -->

カードの内容①

</div>

カードの内容②

</div>

カードの内容③

</div>

・・・

</div>

</div>

「Masonry」組み込みの基本

<div class="container my-5">
<div class="grid-index row">・・・・・クラス「grid-index」追加

<div class="grid-sizer col-12 col-sm-6 col-lg-3"></div>・・・・・定義追加「grid-sizer」

<div class="grid-item col-12 col-sm-6 col-lg-3">・・・・・クラス「grid-item」追加
カードの内容①
</div>

<div class="grid-item col-12 col-sm-6 col-lg-3">
カードの内容②
</div>

<div class="grid-item col-12 col-sm-6 col-lg-3">
カードの内容③
</div>

・・・

</div> <!-- .grid-index.row -->
</div> <!-- .container -->

<div class="grid-index row">・・・・・クラス「grid-index」追加

<div class="grid-sizer col-12 col-sm-6 col-lg-3"></div>・・・・・定義追加「grid-sizer」

<div class="grid-item col-12 col-sm-6 col-lg-3">・・・・・クラス「grid-item」追加

カードの内容①

</div>

カードの内容②

</div>

カードの内容③

</div>

・・・

</div>

</div>

サンプル

比較サンプルを作成してみました。

サンプル

次ページに比較サンプルのHTMLあります。