css页面特效--多列与瀑布流效果

最新推荐文章于 2024-09-09 12:23:47 发布

转载最新推荐文章于 2024-09-09 12:23:47 发布 · 419 阅读

本文介绍如何使用 CSS3 实现多列布局和瀑布流效果。通过 column-count 和 column-width 属性，可以轻松地对文本进行分栏显示，并使图片按不同高度排列，形成美观的瀑布流布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、多列

在css3中，可以创建多列来对文本或者区域进行布局

属性：

column-count：列数

column-gap：距离

column-rule：线及线的颜色

HTML文件为：

   [java] 
   view plaincopy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>多列</title>  
    <link rel="stylesheet" type="text/css" href="style.css">  
</head>  
<body>  
<div class="div1">  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
    这是一个多列展示，要实现分列。这是一个多列展示，要实现分列。  
  
</div>  
</body>  
</html>  

css文件为：

   [java] 
   view plaincopy
.div1{  
    column-count: 4;  
    -webkit-column-count: 4;  
    -webkit-column-gap: 30px;  
    column-gap: 30px;  
    column-rule: 5px outset red;  
    -webkit-column-rule: 5px outset red;  
}  

显示效果为：

可以看出对多行的文字进行了分列展示。

2、css瀑布流效果

瀑布流就是在网页中每张图片依次按照宽度相同但是高度不同排放

HTML文件为：

   [html] 
   view plaincopy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>css瀑布流效果</title>  
    <link rel="stylesheet" type="text/css" href="style.css">  
</head>  
<body>  
<div class="container">  
    <div><img src="image/1.jpg"/></div>  
    <div><img src="image/2.jpg"/></div>  
    <div><img src="image/3.jpg" /></div>  
    <div><img src="image/4.jpg"/></div>  
    <div><img src="image/5.jpg"/></div>  
    <div><img src="image/6.jpg"/></div>  
    <div><img src="image/7.jpg"/></div>  
    <div><img src="image/5.jpg"/></div>  
    <div><img src="image/6.jpg"/></div>  
    <div><img src="image/1.jpg"/></div>  
    <div><img src="image/2.jpg"/></div>  
    <div><img src="image/3.jpg"/></div>  
    <div><img src="image/4.jpg"/></div>  
</div>  
</body>  
</html>  

css样式为：

   [html] 
   view plaincopy
.container{  
    column-width: 200px;  
    -webkit-column-width:200px;  
    column-gap: 5px;  
    -webkit-column-gap: 5px;  
}  
.container div{  
    width: 200px;  
    margin: 5px 0;  
}  