HTML と CSS を使用してウォーターフォール フロー ギャラリー レイアウトを実装する方法

HTML と CSS を使用してウォーターフォール フロー ギャラリー レイアウトを実装する方法

ウォーターフォール フロー レイアウトは、画像を複数の列に配置する一般的なギャラリー レイアウト方法です。より面白くて美しく見えます。この記事では、HTML と CSS を使用してウォーターフォール フロー ギャラリー レイアウトを実装する方法を紹介し、具体的なコード例を示します。

1. HTML 構造

まず、すべての画像をラップするコンテナを HTML で作成する必要があります。たとえば、<div> 要素を作成し、「gallery」などの一意の ID を設定できます。<pre class='brush:php;toolbar:false;'>&lt;div id=&quot;gallery&quot;&gt; &lt;!-- 在这里插入图片 --&gt; &lt;/div&gt;</pre><p>次に、複数の画像を挿入する必要があります。 <code><img src="/static/imghwm/default1.png" data-src="image1.jpg" class="lazy" alt="HTML と CSS を使用してウォーターフォール フロー ギャラリー レイアウトを実装する方法" > 要素を使用して画像を挿入し、前に作成したコンテナに配置します。例:

<div id="gallery">
  <img src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
  <img src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
  <img src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
  <!-- 插入更多图片 -->
</div>

ここでは例としていくつかの画像が挿入されているだけであり、必要に応じてさらに多くの画像を挿入できることに注意してください。

2. CSS スタイル

次に、CSS を使用してウォーターフォール フロー レイアウトのスタイルを定義する必要があります。まず、コンテナ全体の幅と列数を設定します。例:

#gallery {
  max-width: 1000px; /* 设置最大宽度 */
  column-count: 3; /* 设置列数 */
  column-gap: 20px; /* 设置列间距 */
}

上記のコードでは、コンテナの最大幅を 1000 ピクセルに設定し、コンテナを 3 列に分割します。同時に、列間の間隔を 20 ピクセルに設定します。

次に、ウォーターフォールのレイアウトに合わせて各画像の幅と高さを調整する必要があります。これは、CSS の width、height、および object-fit プロパティを使用して行うことができます。例:

#gallery img {
  width: 100%; /* 使每个图片宽度占满列的宽度 */
  height: auto; /* 根据原始比例调整高度 */
  object-fit: cover; /* 填充整个容器，保持图片比例 */
  margin-bottom: 20px; /* 设置图片之间的垂直间距 */
}

上記のコードでは、各画像の幅を 100% (全列幅) に設定し、元の画像の比率に従って高さを自動的に調整します。同時に、object-fit: cover; を使用して、画像の比率を維持し、コンテナ全体を埋めます。最後に、各画像間の垂直方向の間隔を 20 ピクセルに設定します。

3. 動的レイアウトを実装するための JavaScript (オプション)

ウィンドウ サイズが変更されたときに画像のレイアウトを動的に調整したい場合は、JavaScript を使用してこれを実現できます。ここでは、window オブジェクトの resize イベントを使用して、ウィンドウ サイズの変更をリッスンし、新しいウィンドウ サイズに基づいて画像のレイアウトを再計算できます。例:

window.addEventListener('resize', function() {
  var gallery = document.getElementById('gallery');
  var columnCount = Math.floor(gallery.offsetWidth / 300); // 假设每列宽度固定为300像素
  gallery.style.columnCount = columnCount;
});

上記のコードでは、ウィンドウの resize イベントをリッスンすることでコンテナの幅をリアルタイムで取得し、それに基づいて新しい列数を計算します。新しい幅。次に、コンテナの columnCount プロパティを変更して列数をリセットします。

概要

上記の手順により、HTML と CSS を使用してウォーターフォール フロー ギャラリー レイアウトを実装できます。必要に応じてコンテナの幅、列数、画像の間隔を調整して、希望の効果を実現できます。動的レイアウトを実装する場合は、JavaScript を使用して動的にレイアウトを調整できることに注意してください。上記の内容がお役に立てば幸いです。