Comment implémenter un flux en cascade avec CSS ? L'article suivant vous présentera deux façons d'utiliser CSS pour implémenter le flux en cascade. J'espère qu'il vous sera utile !
Le flux en cascade, également connu sous le nom de disposition en cascade, est une méthode de mise en page de site Web populaire. Il est souvent utilisé lors de l’affichage de plusieurs images sur des téléphones mobiles. Autrement dit, plusieurs rangées d'éléments de même largeur sont disposées et les éléments suivants y sont ajoutés en séquence, avec une largeur égale et une hauteur inégale. Ils sont mis à l'échelle en fonction de la proportion originale de l'image jusqu'à ce que la largeur atteigne nos exigences, puis. placé à la position désignée selon les règles.
Alors, quelles sont les méthodes de mise en œuvre de l'aménagement d'un flux en cascade ?
column Disposition multiligne pour implémenter le flux en cascadecolumn 多行布局实现瀑布流
column 实现瀑布流主要依赖两个属性。
column-count 属性，是控制屏幕分为多少列。
column-gap 属性，是控制列与列之间的距离。
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局-column</title>
<style>
.box {
margin: 10px;
column-count: 3;
column-gap: 10px;
}
.item {
margin-bottom: 10px;
}
.item img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
</div>
</body>
</html>Copier après la connexion
flex 弹性布局实现瀑布流
flex 实现瀑布流需要将最外层元素设置为 display: flex，使用弹性布局
flex-flow:column wrap 使其纵向排列并且换行换行
设置 height: 100vh 填充屏幕的高度，也可以设置为单位为 px 的高度，来容纳子元素。
每一列的宽度可用 calc 函数来设置，即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin
column L'implémentation du flux en cascade repose principalement sur deux attributs. L'attribut
column-count contrôle le nombre de colonnes en lesquelles l'écran est divisé. L'attribut 
column-gap contrôle la distance entre les colonnes.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
display: flex;
flex-flow: column wrap;
height: 100vh;
}
.item {
margin: 10px;
width: calc(100%/3 - 20px);
}
.item img{
width: 100%;
height:100%;
}
</style>
</head>
<body>
<div class="box">
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
<div class="item">
<img src="./imgs/2.jpg" alt="2" />
</div>
<div class="item">
<img src="./imgs/3.jpg" alt="3" />
</div>
<div class="item">
<img src="./imgs/1.jpg" alt="1" />
</div>
</div>
</body>
</html>Copier après la connexion
flex Disposition flexible pour implémenter un flux en cascade
flex Pour implémenter un flux en cascade, vous devez définir le flux le plus externe élément à afficher : flex, utilisez une mise en page flexible
flex-flow:column wrap pour l'organiser verticalement et l'envelopper dans de nouvelles lignes
Définir hauteur : 100vh pour remplir l'écran. La hauteur peut également être définie sur la hauteur en unités de px pour accueillir les éléments enfants. La largeur de chaque colonne peut être définie avec la fonction calc, c'est-à-dire width: calc(100%/3 - 20px). Divisez en 3 colonnes de largeur égale moins la distance marge deux fois à gauche et à droite.
🎜rrreee🎜L'effet d'affichage est le suivant🎜🎜🎜🎜🎜🎜Code de cas🎜🎜🎜Code d'implémentation du flux de cascade : https://gitee.com/yunxii/css-demo/tree/master/waterfall🎜🎜🎜Adresse d'origine : https://juejin.cn/post/7011333433318178846🎜🎜Auteur : tangxd3🎜🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéo de programmation🎜 ! ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
