CSS を使用してレスポンシブ カードのウォーターフォール フロー レイアウトを実装するためのヒント

CSS を使用してレスポンシブ カード ウォーターフォール フロー レイアウトを実装するヒント

モバイル デバイスの人気と Web コンテンツの多様化に伴い、レスポンシブ デザインは最新の Web 開発になりました基本的な要件の 1 つ。その中でも、カードレイアウトとウォーターフォールレイアウトは徐々に人気のあるデザインスタイルになっています。この記事では、CSS を使用してレスポンシブ カード ウォーターフォール レイアウトを実装する方法を紹介し、具体的なコード例を示します。

1. HTML 構造

まず、

要素と
• 要素を使用するなど、HTML で一連のカードの構造を定義する必要があります。各カードは、タイトル、画像、説明などを含めることができるコンテンツを含む
  要素で構成されます。以下は簡単な例です:

  <ul class="card-container">
    <li class="card">
      <div class="card-content">
        <h2>Card 1</h2>
        <img src="card1.jpg" alt="Card 1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
    <li class="card">
      <div class="card-content">
        <h2>Card 2</h2>
        <img src="card2.jpg" alt="Card 2">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </li>
    // 更多卡片...
  </ul>

  ログイン後にコピー

  2. CSS スタイル

  次に、CSS を使用してカード ウォーターフォール フロー レイアウトを実装する必要があります。

  1. 基本スタイルの設定:

  .card-container {
    display: flex;  // 使用flex布局
    flex-wrap: wrap;  // 允许换行
    justify-content: space-between;  // 平均分布卡片
  }
  
  .card {
    flex: 0 0 calc(33.33% - 10px);  // 每行显示3个卡片
    margin-bottom: 20px;  // 卡片之间的间距
  }

  ログイン後にコピー

  2. レスポンシブ デザイン:

  @media screen and (max-width: 768px) {
    .card {
      flex: 0 0 calc(50% - 10px);  // 在较小屏幕上每行显示2个卡片
    }
  }
  
  @media screen and (max-width: 480px) {
    .card {
      flex: 0 0 calc(100% - 10px);  // 在更小屏幕上每行显示1个卡片
    }
  }

  ログイン後にコピー

  3. 表示効果の最適化:

  ウォーターフォール フロー レイアウトを実装するには、CSS の列属性を使用できます。各カード コンテナを複数の列に設定すると、カードが自動的にウォーターフォール スタイルで配置されます。

  .card-container {
    column-count: 3;  // 设置为3列
    column-gap: 20px;  // 卡片之间的间距
  }
  
  @media screen and (max-width: 768px) {
    .card-container {
      column-count: 2;  // 较小屏幕时设置为2列
    }
  }
  
  @media screen and (max-width: 480px) {
    .card-container {
      column-count: 1;  // 更小屏幕时设置为1列
    }
  }

  ログイン後にコピー

  3. JavaScript の補足

  ウォーターフォール フロー レイアウトの列が比較的長くなることがありますが、JavaScript を使用して各列の高さのバランスを取ることができます。

  window.addEventListener('load', function() {
    // 获取所有卡片元素
    var cards =  document.querySelectorAll('.card');
  
    // 创建一个数组来保存每列的高度
    var columnHeights = [];
  
    // 循环计算每列的高度并存入数组
    cards.forEach(function(card) {
      var columnIndex = 0;
      var minHeight = columnHeights[columnIndex] || 0;
  
      columnHeights.forEach(function(height, index) {
        if (height < minHeight) {
          columnIndex = index;  // 找到高度最小的列
          minHeight = height;
        }
      });
  
      card.style.order = columnIndex;  // 设置显示顺序
      columnHeights[columnIndex] = minHeight + card.offsetHeight + 20;  // 20为间距
    });
  });

  ログイン後にコピー

  4. 概要

  上記のコード例を通じて、レスポンシブ カード ウォーターフォール フロー レイアウトを実装できます。 CSS フレックス、列、JavaScript 計算を使用することで、カードのコンテンツをさまざまな画面サイズにエレガントに表示し、各列の高さのバランスをとることができます。このようなレイアウトは美しいだけでなく、適応性も高いため、ユーザーは Web コンテンツをより快適に閲覧できるようになります。同時に、実際のニーズに応じて、サンプルコードをさらに変更および最適化して、個別の設計ニーズを満たすことができます。

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