博主最近在学习有关布局的相关知识,总结了使用纯CSS实现瀑布流布局的两种方案。
那么什么叫瀑布流布局呢?让我们通过图片来了解一下:
瀑布流布局其核心是基于一个网格的布局,而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度),同时每个项目列表呈堆栈形式排列,最为关键的是,堆栈之间彼此之间没有多余的间距差存大。
废话不多说,直接上方案:
1. 方案一,使用CSS3的column
属性,具体实现如下:
html代码:
<body>
<div class="container">
<div class="item">
<div class="itemContent" style="background-color: blue;height: 50px">1</div>
</div>
<div class="item">
<div class="itemContent" style="background-color: rosybrown;height: 100px">2</div>
</div>
<div class="item">
<div class="itemContent" style="background-color: red;height: 80px">3</div>
</div>
...为了方便省略了中间代码,这里为了方便区分,直接使用内联样式创建了四种颜色、高度各不相同的div块共20个
<div class="item">
<div class="itemContent" style="background-color: blue;height: 50px">19</div>
</div>
<div class="item">
<div class="itemContent" style="background-color: red;height: 80px">20</div>
</div>
</div>
</body>
这里用class为container
的div标签作为最外层的父容器,里面是20个class为item
的div标签,每个标签里都包裹着不同的内容div块。
然后是CSS代码:
.container{
width: 100%;
column-count: 5;
}
.item{
break-inside: avoid;
margin-bottom:10px;
}
这里的关键属性是column-count
,设置列数为5。然后是break-inside:avoid
,为了控制文本块分解成单独的列,以免项目列表的内容跨列,破坏整体的布局。这样就实现了瀑布流布局,效果如下:
2.第二种方案是使用Flexbox
布局
首先,修改一下html中的代码:
<div class="column">
<div class="item">
<div class="itemContent" style="background-color: blue;height: 50px">1</div>
</div>
<div class="item">
<div class="itemContent" style="background-color: rosybrown;height: 100px">2</div>
</div>
<div class="item">
<div class="itemContent" style="background-color: red;height: 80px">3</div>
</div>
<div class="item">
<div class="itemContent" style="background-color: rosybrown;height: 100px">4</div>
</div>
</div>
...
这里为每4个div块的外面包了一层div作为单独的列,class为column
,其余保持不变。(因为一共用了20个div块,在上一个例子中分为了5列,所以这里为了保持一致把每4个div块设置成了一列)
下面是CSS代码:
.container{
display: flex;
flex-direction: row;
}
.column{
display: flex;
flex-direction: column;
width: 100%;
margin: 10px;
}
.item{
margin-bottom: 10px;
}
这里把container
和column
都设置为flex
布局,container的属性设置为flex-direction:row
,column的属性设置为flex-direction: column
,还要设置一下每一列的宽度,这里设置为width: 100%
。这样,也实现了瀑布流布局,效果如下:
这两种方案都是通过纯CSS实现的,或许方案不够完美,如果需要更完美的方案可以采用js实现,不多说了,博主去学习了!