Masonry.jsを使い、Pinterestのようなページを作りたい

(Sample)

Masonry.jsというJavaScriptのライブラリを使用することで、Pinterestのようなグリッドレイアウトを実現できます。

アイテムの配置を自動的に最適化し、空白を最小限に抑えます。

ちなみに、masonryとは英語で石積のことです。

HTML

    <div class="grid">
        <div class="grid-item"> <img src="https://picsum.photos/id/247/300/200" alt="画像"></div>
        <div class="grid-item"> <img src="https://picsum.photos/id/258/300/200" alt="画像"></div>
        <div class="grid-item"> <img src="https://picsum.photos/id/249/300/200" alt="画像"></div>
        <div class="grid-item"> <img src="https://picsum.photos/id/250/300/200" alt="画像"></div>
        <div class="grid-item"> <img src="https://picsum.photos/id/251/300/200" alt="画像"></div>
        <div class="grid-item"> <img src="https://picsum.photos/id/254/300/200" alt="画像"></div>
    </div>

.gridの中に.grid-itemを用意しておきます。

CSS

.grid-item { width: 300px; height: 200px; margin: 10px; background: #ccc; padding: 10px; }

.grid-itemの設定です。

JavaScript

    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
    <script>
        const grid = document.querySelector('.grid');
        new Masonry(grid, {
            itemSelector: '.grid-item',
            columnWidth: '.grid-item',
            percentPosition: true
        });
    </script>

• <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"...>...</script>: Masonry.jsのJavaScriptファイルをCDNからインクルードします。

設定プロパティ

• itemSelector:
  • 値: '.grid-item'
  • 説明: グリッド内のアイテムを指定するCSSセレクタです。Masonryはこのセレクタを使って、どの要素をグリッドアイテムとして扱うかを決定します。
• columnWidth:
  • 値: '.grid-item'
  • 説明: グリッドのカラム幅を指定するためのCSSセレクタです。Masonryはこのセレクタの要素を基準にカラム幅を決定します。同じセレクタを指定することで、アイテムの幅をそのままカラム幅として使用します。
• percentPosition:
  • 値: true
  • 説明: グリッドアイテムの位置をパーセンテージベースで計算します。レスポンシブデザインに対応しやすくなります。

その他のプロパティ

• gutter:
  • 説明: アイテム間のスペース（ガター）を設定します。数値（ピクセル単位）やセレクタを指定できます。
  • 例: gutter: 10
• fitWidth:
  • 説明: コンテナの幅をアイテムの幅に合わせます。これにより、コンテナがアイテムの幅にぴったりフィットします。
  • 値: true または false
  • 例: fitWidth: true
• originLeft:
  • 説明: アイテムのレイアウトが左から始まるかどうかを設定します。false に設定すると右から始まります。
  • 値: true または false
  • 例: originLeft: false
• originTop:
  • 説明: アイテムのレイアウトが上から始まるかどうかを設定します。false に設定すると下から始まります。
  • 値: true または false
  • 例: originTop: false
• transitionDuration:
  • 説明: レイアウト変更時のアニメーションの持続時間を設定します。CSSの時間指定形式（例: 0.4s）で指定します。
  • 例: transitionDuration: '0.4s'
• stagger:
  • 説明: アイテムのアニメーションを時間差で開始するためのディレイを設定します。
  • 例: stagger: 30（30ミリ秒）

その他のプロパティ

以上、Swiperの解説でした。