首页 php下载 php教程 电脑软件 手机软件 手机游戏 单机游戏 资讯文章 专题下载 标签合集

CSS怎么实现瀑布流?两种方式介绍

时间:2021-10-12

来源:互联网

在手机上看
手机扫描阅读

今天PHP爱好者为您带来CSS怎么实现瀑布流?下面本篇文章给大家介绍一下使用CSS实现瀑布流的两种方式,希望对大家有所帮助!希望对大家有所帮助。

column-count 属性,是控制屏幕分为多少列。

column-gap 属性,是控制列与列之间的距离。

<!DOCTYPE html>
<html>
<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>
 <p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
 </p>
</body>
</html>

2.png

flex 弹性布局实现瀑布流

flex 实现瀑布流需要将最外层元素设置为 display: flex,使用弹性布局

flex-flow:column wrap 使其纵向排列并且换行换行

设置 height: 100vh 填充屏幕的高度,也可以设置为单位为 px 的高度,来容纳子元素。

每一列的宽度可用 calc 函数来设置,即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。

<!DOCTYPE html>
<html>
<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>瀑布流布局-flex</title>
 <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>
 <p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
   <p>
     <img  src="./imgs/2.jpg" alt="2" />
   </p>
   <p>
     <img  src="./imgs/3.jpg" alt="3" />
   </p>
   <p>
     <img  src="./imgs/1.jpg" alt="1" />
   </p>
 </p>
</body>
</html>

展示效果如下

3.png

案例代码

瀑布流实现代码:https://gitee.com/yunxii/css-demo/tree/master/waterfall

原文地址:https://juejin.cn/post/7011333433318178846

作者:tangxd3

以上就是CSS怎么实现瀑布流?两种方式介绍的详细内容,更多请关注php爱好者其它相关文章!

相关阅读 更多

热门下载

更多