瀑布流布局是网页中常见的布局效果,一般我们都是用JS实现的,其实用CSS 3.0的属性也可以实现这个功能,并且还自带了响应式功能,效果如下 :
以下是代码实现,欢迎大家复制粘贴和收藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS 3.0实现瀑布流布局</title>
<style>
h1{
text-align: center;
}
.columns {
/* 设置或检索对象每列的宽度 */
column-width: 320px;
/* 设置或检索对象的列与列之间的间隙 */
column-gap: 15px;
width: 9