ブロック要素を自動整列させるときの定番「Masonry」、Bootstrap4でも部分的につかうことはあったのですがBootstrap4を「カード」を「Masonry」で制御する方法を解説しているサイトがありましたので参考にページを作ってみました。
参考サイト Bootstrap4のCardsとMasonry.jsの相性が最強だった件
JSの読み込み(CDN)
まずはブートストラップのページに「Masonry」を読み込みます
1 |
<script src="https://unpkg.com/masonry-layout@4.2.1/dist/masonry.pkgd.min.js"></script> |
そこに実行コードを追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(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>の前のコードはこんな感じ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!-- 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> |
HTMLの違い
通常のカードの基本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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 --> |
「Masonry」組み込みの基本
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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 --> |
サンプル
比較サンプルを作成してみました。
次ページに比較サンプルのHTMLあります。
コメント