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

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

Web 開発では、ウォーターフォール フロー カード レイアウトは一般的で優れた表示方法です。ウォーターフォール フロー レイアウトはカードの不規則な形状が特徴で、コンテンツの量と画面サイズに応じて高さと位置が自動的に調整され、ページがより魅力的でインタラクティブになります。この記事では、HTML と CSS を使用してウォーターフォール フロー カード レイアウトを実装する方法を紹介し、具体的なコード例を示します。

1. HTML 構造
まず、HTML 構造を作成する必要があります。この例では、複数のカードを含むコンテナを使用します。各カードには画像とテキストが含まれます。以下のコードを見てください:

<div class="container">
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="Image 1">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="Image 2">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="card">
    <img src="/static/imghw/default1.png"  data-src="image3.jpg"  class="lazy" alt="Image 3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <!-- 添加更多的卡片 -->
</div>

2. CSS スタイル

次に、ウォーターフォール フロー カード レイアウトを実装するために CSS スタイルを追加する必要があります。まず、コンテナの幅を設定し、その内部要素をフローティングにする必要があります。カードの幅と間隔も設定する必要があります。以下のコードを見てください:

.container {
  width: 90%;
  margin: 0 auto;
}

.card {
  width: 300px;
  margin-bottom: 20px;
  float: left;
}

次に、ウォーターフォール効果を実現するために詳細スタイルを追加する必要があります。 CSS の column-count プロパティと column-gap プロパティを使用して列を作成し、break-inside プロパティを使用して各カードを独立して表示できます。さらに、CSS の transform プロパティを使用してアニメーション効果を追加することもできます。以下のコードを見てください:

.container {
  column-count: 3;
  column-gap: 20px;
}

.card {
  break-inside: avoid;
  transform: translateY(0);
  transition: transform .3s ease-in-out;
}

.card:hover {
  transform: translateY(-10px);
}

これらのスタイルは 3 列のウォーターフォール レイアウトを作成し、マウスオーバーで上向きのアニメーションを生成します。必要に応じて調整およびカスタマイズできます。

3. JavaScript 拡張機能

上記の方法では単純なウォーターフォール フロー レイアウトを実現できますが、より複雑なレイアウト要件の場合は、それを実現するために JavaScript を使用する必要がある場合があります。たとえば、ページが読み込まれるときに、JavaScript を使用してカードの位置と高さを動的に計算して設定できます。以下は、JavaScript を使用してウォーターフォール フロー レイアウトを実装する簡単な例です。

window.addEventListener('load', function() {
  var container = document.querySelector('.container');
  var columnCount = 3;
  var columnHeight = [];

  // 初始化列高度
  for (var i = 0; i < columnCount; i++) {
    columnHeight[i] = 0;
  }

  Array.from(container.children).forEach(function(card) {
    // 找到最小高度的列
    var minHeight = Math.min.apply(null, columnHeight);
    var columnIndex = columnHeight.indexOf(minHeight);

    // 设置卡片的位置
    card.style.left = columnIndex * (card.offsetWidth + 20) + 'px';
    card.style.top = minHeight + 'px';

    // 更新列高度
    columnHeight[columnIndex] += card.offsetHeight + 20;
  });
});

この例では、最初にコンテナ要素とカード要素を取得し、次に Array.from メソッドを使用してコンテナに要素を追加します。 子要素は配列に変換されます。次に、ループを使用してカードの位置と高さを計算し、列の高さを更新することで適応型ウォーターフォール レイアウトを実装します。

概要

HTML、CSS、およびいくつかの JavaScript コードを使用すると、ウォーターフォール フロー カード レイアウトを簡単に作成できます。上記の例は、独自のニーズに応じて変更および拡張できる基本的な実装方法を示しています。この記事がウォーターフォール フロー レイアウトの実装方法を理解するのに役立つことを願っています。

以上がHTML と CSS を使用してウォーターフォール フロー カード レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。