元の画像の高さバラバラやん、、、
業務で高さがバラバラの画像を集めたメインビジュアルを実装することになりました。
CSSだけで頑張るのは大変そうだったので、調べてみたところ、便利なものが見つかりました。
これを使えば、ピンタレストのようなレイアウトで画像を配置することができそうです。
やってみる
最低限の手順は大きく分けて3つです。順番に見ていきます。
1.ベースのHTMLを作成
index.htmlを作って、「！」Enterでさくっとベースを整えます。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>メイソンリー練習</p>
<div class="masonry">
<div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x300" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x150" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x220" alt="Placeholder"></div>
</div>
</body>
</html>
VsCodeの拡張機能「Live Server」で表示すると、以下のようになります。
続いて、メイソンリーを設定していきます。
2.メイソンリーの読み込み
手軽にCDNでいきましょう。
以下の3つをbodyの最後に貼り付けます。
index.html
<!-- jQueryのCDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- MasonryのCDN 本体 -->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- imagesLoadedのCDN 画像が全部読み込まれてから動くようにしてくれるもの -->
<script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
</body>
</html>
安定性を重視する場合は、公式からmin.jsをダウンロードして使いましょう。
もちろん、このままではまだメイソンリーの関数を使っていないので動きません。
3.関数を呼び出して設定する。
呼び出したCDNの下で、以下のコードを書きます。
index.html
.
.
.
<!-- imagesLoadedのCDN 画像が全部読み込まれてから動くようにしてくれるもの -->
<script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
$('.masonry').masonry({
itemSelector: '.masonry-item',
gutter: 40, // 左右の余白
});
</script>
</body>
結果はこうなります。
全体のコード
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>メイソンリー練習</p>
<div class="masonry">
<div class="masonry-item"><img src="https://via.placeholder.com/300x200" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x250" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x180" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x300" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x150" alt="Placeholder"></div>
<div class="masonry-item"><img src="https://via.placeholder.com/300x220" alt="Placeholder"></div>
</div>
<!-- jQueryのCDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- MasonryのCDN 本体 -->
<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- imagesLoadedのCDN 画像が全部読み込まれてから動くようにしてくれるもの -->
<script src="https://cdn.jsdelivr.net/npm/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script>
$('.masonry').masonry({
itemSelector: '.masonry-item',
gutter: 0,
});
</script>
</body>
</html>
大枠はこれで完了です。お疲れ様でした。
細かな調整は↓の記事にて。
参考