How to use HTML and CSS to implement waterfall flow product display layout

How to use HTML and CSS to implement waterfall flow product display layout

Waterfall flow layout is a common web design method, which is characterized by a well-organized and dynamic presentation. sequential visual effects. Applying waterfall flow layout to product display web pages can improve the display effect of products and attract users' attention. This article will introduce how to use HTML and CSS to implement waterfall flow product display layout, and provide specific code examples.

1. HTML structure

First, we need to build a basic HTML structure, based on the container element, to wrap the product display area.

<div class="container">
  <div class="item">
    <img  src="/static/imghw/default1.png"  data-src="image1.jpg"  class="lazy" alt="How to use HTML and CSS to implement waterfall flow product display layout" >
    <h3 id="商品标题">商品标题1</h3>
    <p>商品描述1</p>
  </div>
  <div class="item">
    <img  src="/static/imghw/default1.png"  data-src="image2.jpg"  class="lazy" alt="How to use HTML and CSS to implement waterfall flow product display layout" >
    <h3 id="商品标题">商品标题2</h3>
    <p>商品描述2</p>
  </div>
  ...
</div>

In the above code, we use a div element named container as the overall container, and multiple item elements are nested in it , each item element represents a display block of a product. In the item element, we can insert related content such as pictures, titles, and descriptions.

2. CSS Style

Next, we need to add some styles to these elements to achieve the waterfall flow layout effect.

.container {
  column-count: 3;
  column-gap: 20px;
}

.item {
  display: inline-block;
  width: 100%;
  margin-bottom: 20px;
}

.item img {
  width: 100%;
}

.item h3 {
  margin-top: 10px;
  font-size: 16px;
}

.item p {
  margin-top: 5px;
  font-size: 14px;
}

In the above code, we first divide the container container into 3 columns through the column-count attribute (the number of columns can be adjusted according to the actual situation), and then use column-gap The property sets the spacing between columns.

For the item element, we set it to display: inline-block to arrange it horizontally, and set the width to 100%, so that each item elements can fill the entire column. We can also set the vertical spacing between item elements by setting the margin-bottom attribute.

For the pictures, titles, descriptions and other contents in the item element, we set the width, font size and other styles according to actual needs to adapt them to the waterfall flow layout effect.

3. JavaScript implements dynamic layout

The above HTML and CSS code can already achieve a static waterfall flow layout effect, but if you want the page content to be loaded dynamically, you can implement the waterfall through JavaScript. Dynamic layout of streams.

The following is a simple JavaScript code example that implements the function of automatically loading more product display blocks when the page scrolls to the bottom.

window.addEventListener('scroll', function() {
  var container = document.querySelector('.container');
  var lastItem = container.lastElementChild;
  var lastItemOffset = lastItem.offsetTop + lastItem.clientHeight;
  var pageOffset = window.pageYOffset + window.innerHeight;

  if (pageOffset > lastItemOffset) {
    // 加载更多商品展示块的代码
    // 可以通过 AJAX 请求获取更多商品数据并插入到 container 中
  }
});

In the above code, we listen to the scroll event of the page. When the page scrolls to the bottom, that is, pageOffset > lastItemOffset When the conditions are met, more product displays can be loaded. block of code. In actual applications, you can obtain more product data through AJAX requests and insert the new product display block into the container container.

To sum up, by using HTML and CSS to implement waterfall flow product display layout, we can display a well-organized, dynamic and orderly product display effect to better attract users' attention. Through JavaScript's dynamic layout, you can automatically load more product display blocks when the page scrolls to the bottom, improving user experience.

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