Conseils pour implémenter une disposition de flux en cascade de cartes réactive à l'aide de CSS

Conseils pour mettre en œuvre une disposition de flux de cartes en cascade réactive à l'aide de CSS

Avec la popularité des appareils mobiles et la diversification du contenu Web, la conception réactive est devenue l'une des exigences de base du développement Web moderne. Parmi eux, la disposition des cartes et la disposition des flux en cascade sont progressivement devenues des styles de conception populaires. Cet article explique comment utiliser CSS pour implémenter une disposition en cascade de cartes réactive et fournit des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons définir la structure d'un ensemble de cartes en HTML, par exemple en utilisant les éléments

Chaque carte est constituée d'un élément
contenant du contenu, qui peut contenir des titres, des images, des descriptions, etc. Voici un exemple simple :

<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>

Copier après la connexion

2. Style CSS

Ensuite, nous devons utiliser CSS pour implémenter la disposition en cascade de la carte.

1. Définissez le style de base :

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

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

Copier après la connexion

2. Conception réactive :

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

Copier après la connexion

3. Optimisez l'effet d'affichage :

Pour implémenter la disposition du flux en cascade, nous pouvons utiliser l'attribut column de CSS. Définissez chaque conteneur de cartes sur plusieurs colonnes afin que les cartes soient automatiquement disposées dans un style en cascade.

.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列
  }
}

Copier après la connexion

3. Supplément JavaScript

Parfois, une colonne dans la disposition du flux en cascade sera relativement longue. Vous pouvez utiliser JavaScript pour équilibrer la hauteur de chaque colonne.

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为间距
  });
});

Copier après la connexion

4. Résumé

Grâce aux exemples de code ci-dessus, nous pouvons implémenter une disposition de flux en cascade de cartes réactive. En utilisant CSS flex, colonnes et calculs JavaScript, nous pouvons afficher avec élégance le contenu de la carte sur différentes tailles d'écran et équilibrer la hauteur de chaque colonne. Une telle mise en page est non seulement esthétique, mais également hautement adaptable, permettant aux utilisateurs de mieux parcourir le contenu Web. Dans le même temps, en fonction des besoins réels, nous pouvons modifier et optimiser davantage l'exemple de code pour répondre aux besoins de conception personnalisés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!