瀑布流实现方式

简介：css实现瀑布流，瀑布流实现的几种方式，多列布局瀑布流，浮动布局瀑布流，自定义瀑布流

之前做移动端项目时遇到瀑布流的需求，我都是使用左右两列分开来做的方式，但是今天在别人的博客中发现另一种更好的写法【多列布局实现瀑布流】，我觉得很不错，分享给大家。

1. 左右两列分开布局实现

先来看看我之前的实现的方式，这种方式也不是很复杂，但是有很多毛病，需要我们去计算元素是放在左边还是右边，比较坑爹。

1.1 定义两个div容器作为左右两边的容器

<div class="container">
    <div class="container_left">容器1</div>
    <div class="container_right">容器2</div>
</div>

1.2 设置CSS

.container{
    display: flex;
    justify-content:space-between;/* 弹性盒子元素会平均地分布在行里 */
}
.container_left,.container_right{
    flex: 1;
}
.container_left{
    background: #3f3;
    margin-right: 10px;/* 设置左右两别容器间的间距 */
}
.container_right{
    background: #f3f;
}

1.3 将数据均匀的平分到左右两别

我这里采用偶数奇数的方式进行平均分配，偶数在左边，奇数在右边，具体代码如下：

<div class="container">
    <div class="container_left">
        <template v-for="(item, index) in data">
            <div :key="index" v-if="index % 2 == 0">偶数在左边容器</div>
        </template>
    </div>
    <div class="container_right">
        <template v-for="(item, index) in data">
            <div :key="index" v-if="index % 2 != 0">奇数在右边容器</div>
        </template>
    </div>
</div>

这种实现方式最麻烦的地方就是需要我们自己去计算数据放在哪边容器中。不过，下面的多列布局的方式就没有这个麻烦了。

2. 多列布局实现瀑布流

这种方式不需要计算元素放哪一边，确实优化了代码。但是有一个非常不好的缺点：数据是先排列在左边，左边排满后再往右边插入，这就导致所有新的数据永远都在左边，不利于排序。

2.1 HTML代码如下：

<div class="container">
    <div v-for="(item, index) in data" :key="index">
        <img :src="item.image" style="width:100%;display: block;"></img>
    </div>
</div>

2.2 CSS部分

.container{
    column-count: 2;/* 设置有多少列 */
    column-width: 50%;/* 设置每一列的宽度 */
    column-gap: 10px;/* 设置l两列之间的间距 */
    column-span: 1;
}
.container>div{
    break-inside: avoid;/* 防止溢出内容问题 */
}

3. 浮动布局实现瀑布流

这种方式也不需要计算元素需要放在哪边，但是浮动布局有一个非常难以接受的缺点：有可能出现空白的区域，很是难看，所以不推荐大家使用。

3.1 HTML代码：

<div class="container">
    <div v-for="(item, index) in data" :key="index">
        <img :src="item.image" style="width:100%;display: block;" />
    </div>
</div>

3.2 CSS部分

.container{
    width: 100%;
}
.container::after{ /* 通过伪元素清除浮动 */
    content: ' ';
    display: block;
    clear: both;
    visibility:hidden;/* 隐藏伪元素 */
    height: 0;
}
.container>div{
    width: 50%;
    box-sizing: border-box;
}
.container>div:nth-child(2n+1){
    float: left;
}
.container>div:nth-child(2n){
    float: right;
}

我所知道的瀑布流实现的方式就只有这么多了，不知道大家有没有更好的瀑布流布局方式，有兴趣的可以在我的公众号留言交流

 

有什么不对的可以在我的公众号留言