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

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

王林

リリース： 2023-11-21 08:26:14

オリジナル

935 人が閲覧しました

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 を使用してカードウォーターフォールフローレイアウトを実装する必要があります。

基本スタイルの設定:

.card-container {
  display: flex;  // 使用flex布局
  flex-wrap: wrap;  // 允许换行
  justify-content: space-between;  // 平均分布卡片
}

.card {
  flex: 0 0 calc(33.33% - 10px);  // 每行显示3个卡片
  margin-bottom: 20px;  // 卡片之间的间距
}

ログイン後にコピー

レスポンシブデザイン:

@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个卡片
  }
}

ログイン後にコピー

表示効果の最適化:

ウォーターフォールフローレイアウトを実装するには、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 サイトの他の関連記事を参照してください。