css实现瀑布流布局

简介: css实现瀑布流布局

瀑布流布局也可以通过纯CSS来实现,使用CSS的column属性可以实现多列布局。下面是一个使用纯CSS实现瀑布流布局的示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>
    .waterfall {
        column-count: 4;
        column-gap: 10px;
    }
 
    .item {
        break-inside: avoid-column;
        margin-bottom: 10px;
    }
 
    .item img {
        width: 100%;
        display: block;
    }
</style>
</head>
<body>
<div class="waterfall">
    <div class="item"><img src="https://via.placeholder.com/150" alt=""></div>
    <div class="item"><img src="https://via.placeholder.com/200" alt=""></div>
    <div class="item"><img src="https://via.placeholder.com/250" alt=""></div>
    <div class="item"><img src="https://via.placeholder.com/300" alt=""></div>
    <div class="item"><img src="https://via.placeholder.com/350" alt=""></div>
    <div class="item"><img src="https://via.placeholder.com/400" alt=""></div>
    <div class="item"><img src="https://via.placeholder.com/450" alt=""></div>
    <div class="item"><img src="https://via.placeholder.com/500" alt=""></div>
</div>
</body>
</html>

 

在这个示例中,我们使用CSS的column-count属性将.waterfall容器分为4列,使用column-gap属性设置列与列之间的间距。然后通过break-inside: avoid-column属性确保.item元素不会被分割到两列之间。最后,设置.item img元素的宽度为100%以确保图片占满整个列,并设置display: block以消除图片之间的空隙。

通过这种方式,我们可以实现一个简单的瀑布流布局,不需要额外的JavaScript代码。你可以根据实际需求调整列数、间距和元素样式等来实现不同的效果。

相关文章
|
6天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
18天前
|
前端开发
css 十字分割线(含四等分布局)
css 十字分割线(含四等分布局)
19 2
|
17天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
19 0
CSS 【实战】 “四合院”布局
|
20天前
|
前端开发
css的flex布局中使用margin:auto智能分配剩余空间
css的flex布局中使用margin:auto智能分配剩余空间
18 1
|
21天前
|
前端开发 算法 容器
css【详解】grid布局—— 网格布局(栅格布局)(一)
css【详解】grid布局—— 网格布局(栅格布局)(一)
23 1
|
14天前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
28 0
|
18天前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
6 0
|
18天前
|
前端开发 C++ 容器
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)
21 0
|
20天前
|
前端开发
前端 CSS 经典:flex + margin 布局
前端 CSS 经典:flex + margin 布局
13 0
|
21天前
|
前端开发 容器
css【详解】grid布局—— 网格布局(栅格布局)(二)
css【详解】grid布局—— 网格布局(栅格布局)(二)
7 0