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

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.

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

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

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

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.

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.

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.

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


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Dreamweaver Mac version
Visual web development tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

SublimeText3 Chinese version
Chinese version, very easy to use

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