How to implement waterfall flow card layout using HTML and CSS

How to use HTML and CSS to implement waterfall flow card layout

In web development, waterfall flow card layout is a common and cool display method. The waterfall flow layout is characterized by irregular shapes of cards, and the height and position automatically adapt according to the amount of content and screen size, making the page more attractive and interactive. This article will introduce how to use HTML and CSS to implement waterfall flow card layout, and provide specific code examples.

1. HTML structure
First, we need to create the HTML structure. In this example, we will use a container that contains multiple cards, each containing an image and a piece of text. Please look at the code below:

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

Next, we need to add CSS style to implement the waterfall flow card layout. First, we need to set the width of the container and float its internal elements. We also need to set the width and spacing of the card. Please look at the code below:

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

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

Now, you need to add detail styles to achieve the waterfall effect. We can use the column-count and column-gap properties of CSS to create columns, and use the break-inside property to make each card appear independently. In addition, we can also use the transform property of CSS to add some animation effects. Please look at the code below:

.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);
}

These styles will create a waterfall layout with 3 columns and produce an upward animation on mouseover. You can adjust and customize it as needed.

3. JavaScript extension

Although the above method can achieve a simple waterfall flow layout, for more complex layout requirements, we may need to use JavaScript to help us achieve it. For example, when the page loads, we can use JavaScript to dynamically calculate and set the card's position and height. The following is a simple example of using JavaScript to implement waterfall flow layout:

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;
  });
});

In this example, we first get the container and card elements, and then use the Array.from method to add the elements in the container The child elements are converted into an array. We then use a loop to calculate the position and height of the card and implement an adaptive waterfall layout by updating the column height.

Summary

By using HTML and CSS and some JavaScript code, we can easily create a waterfall flow card layout. The above example provides a basic implementation method that you can modify and extend according to your own needs. I hope this article will help you understand how to implement waterfall flow layout!

The above is the detailed content of How to implement waterfall flow card layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!