纯CSS3实现瀑布流布局效果二种实现方法

发布时间:2020-06-07 11:22:00 浏览量:165 来源:测速网

在做前端数据列表时,除非传统列表外,还有非常流行的瀑布流布局,下面谷歌测速网教大家如果用二种纯css3方法实现瀑布流布局,css3 column布局和Flexbox布局。

方法1:使用CSS3的column属性。

效果:

image.png

html代码:

<div class="box-wrapper">
        <div style="margin-top:0px" class="box"></div>
        <div class="box spe"></div>
        <div class="box spe"></div>
        <div class="box spe"></div>
        <div class="box spe"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box spe"></div>
        <div class="box spe"></div>
    </div>

css代码:

.box {
    height: 123px;
    padding: 1em;
    margin-top: 1em;
    -moz-page-break-inside: avoid;/*避免在元素内部断行并产生新列*/
    -webkit-column-break-inside: avoid;/*避免在元素内部断行并产生新列*/
    break-inside: avoid;
    border: 1px solid #000;
    background: #909090;
}

.spe {
    height: 225px;
}

.box-wrapper {
    -moz-column-count: 3;    /* Firefox */
    -webkit-column-count: 3;    /* Safari 和 Chrome */
    column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;
}

方法二:使用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;
}

这里把containercolumn都设置为flex布局,container的属性设置为flex-direction:row,column的属性设置为flex-direction: column,还要设置一下每一列的宽度,这里设置为width: 100%。这样,也实现了瀑布流布局,效果如下:

image.png

在线工具导航