Tips for implementing responsive card waterfall flow layout using CSS

Tips of using CSS to implement responsive card waterfall flow layout

With the popularity of mobile devices and the diversification of web content, responsive design has become a modern web development one of the basic requirements. Among them, card layout and waterfall layout have gradually become popular design styles. This article will introduce how to use CSS to implement a responsive card waterfall layout and provide specific code examples.

1. HTML structure

First, we need to define the structure of a set of cards in HTML, such as using

and
• elements. Each card consists of a
  element containing content, which can contain titles, images, descriptions, etc. The following is a simple example:

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

  2. CSS style

  Next, we need to use CSS to implement the card waterfall flow layout.

  1. Set basic style:

  .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. Responsive design:

  @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. Optimize display effect:

  To implement waterfall flow layout, we can use the column attribute of CSS. Set each card container to multiple columns so the cards are automatically arranged in a waterfall style.

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

  Sometimes a column in the waterfall flow layout will be relatively long. You can use JavaScript to balance the height of each column.

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

  Through the above code examples, we can implement a responsive card waterfall flow layout. By using CSS flex, columns, and JavaScript calculations, we can elegantly display card content on different screen sizes and balance the height of each column. Such a layout is not only beautiful, but also highly adaptable, allowing users to better browse web content. At the same time, according to actual needs, we can further modify and optimize the sample code to meet personalized design needs.

The above is the detailed content of Tips for implementing responsive card waterfall flow layout using CSS. For more information, please follow other related articles on the PHP Chinese website!