search
HomeWeb Front-endCSS TutorialTips for implementing responsive card waterfall flow layout using CSS

Tips for implementing responsive card waterfall flow layout using CSS

Nov 21, 2023 am 08:26 AM
cssResponsivewaterfall flow layout

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/imghwm/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/imghwm/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;  // 卡片之间的间距
    }
    1. 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个卡片
      }
    }
    1. 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!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricks@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingCSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsModern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsRevisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperState of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more. 

What is CSS Grid?What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software