Masonryを使ってタイル表示
2021-05-28
masonry
Bootstrap4ではCardをタイル表示できたのですが、5ではその機能が除外されてmansonryを使うように推奨されています。色々な副作用があったとのことで・・5では除外されているようです。
#Mansory
Mansoryのサービスページはこちら https://masonry.desandro.com/
MansoryのGithubはこちら https://github.com/desandro/masonry
Bootstrapを使った例はこちら https://getbootstrap.com/docs/5.0/examples/masonry/
CDN
ダウロードしてもよし、NPMでパッケージを管理してもよしですが、一番簡単なのはCDNのリンクを貼り付けて利用することができます。
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
初期化
今回はJQueryを使って初期化
$('.grid').masonry({ // options... itemSelector: '.grid-item', columnWidth: 200 });
Htmlは下記
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 200 }'> <div class="grid-item"></div> <div class="grid-item"></div> ... </div>
こちらが実装済みの画面になります。
公開日: 2021-05-27