HTML+CSS瀑布流布局

最新推荐文章于 2025-04-07 19:49:52 发布

先天性神经靐

最新推荐文章于 2025-04-07 19:49:52 发布

阅读量267

点赞数

文章标签： html 前端 javascript css

本文链接：https://blog.youkuaiyun.com/qq_56714977/article/details/124768924

版权

CSS 瀑布流布局 column-count column-gap 图片布局

关键词由优快云通过智能技术生成

核心代码：

/* 划分多少列 */
column-count: 5;
/* 列之间的间隙 */
column-gap: 20px;

效果：

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瀑布流布局</title>
    <style>
		*{
			padding: 0;
			margin: 0;
		}
		li{
			list-style: none;
		}		
        body,html{
            background-color: #f1f1f1;
            display: flex;
            justify-content: center;
        }
        .box{
            width: 90vw;
			/* 划分多少列 */
            column-count: 5;
			/* 列之间的间隙 */
            column-gap: 20px;
        }
        .oImg{
            margin-bottom: 20px;
        }
        .oImg img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="box">
       <ul>
			<li class="oImg"><img src="Image/z-1.jpg" ></li>
			<li class="oImg"><img src="Image/z-2.jpg" ></li>
			<li class="oImg"><img src="Image/z-3.jpg" ></li>
			<li class="oImg"><img src="Image/z-4.jpg" ></li>
			<li class="oImg"><img src="Image/z-5.jpg" ></li>
			<li class="oImg"><img src="Image/z-6.jpg" ></li>
			<li class="oImg"><img src="Image/z-7.jpg" ></li>
			<li class="oImg"><img src="Image/z-8.jpg" ></li>
			<li class="oImg"><img src="Image/z-1.jpg" ></li>
			<li class="oImg"><img src="Image/z-2.jpg" ></li>
			<li class="oImg"><img src="Image/z-3.jpg" ></li>
			<li class="oImg"><img src="Image/z-4.jpg" ></li>
			<li class="oImg"><img src="Image/z-5.jpg" ></li>
			<li class="oImg"><img src="Image/z-6.jpg" ></li>
			<li class="oImg"><img src="Image/z-7.jpg" ></li>
			<li class="oImg"><img src="Image/z-8.jpg" ></li>s
       </ul>
    </div>
	
</body>
</html>

PS：后期js可以更简单哦!