css瀑布流

用纯css样式搞定瀑布流，上次用了一个特殊的代码实现了，不过代码忘记保存导致找不到了，这里就先说两种方法，一个是flex布局，另一个是使用column-count属性

首先说一下使用column-count属性：

代码如下：

 .list{
            column-count: 2;//想要排成的列数
            column-gap: 0;
        }
        

效果图：

 这里使用的都是组件，如果只给组件外面的盒子加这行代码，可以实现瀑布流效果，但会出现排版错误，这个是根据最短列的高度决定的（内容在列之间断开了），要解决的使用以下

.list {
		column-count: 2;
		column-gap: 10px;
	}
     .list>view{
		 	break-inside: avoid-column;//防止内容在列之间断开
	 }

//页面重现重叠解决的
.list::after{
                 
content:"";
display:table;
clear:both
}

效果如下：

再说一下flex布局：

 .list{
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            /* 需要指定高度 */
            height: 800px;
        }
        .item{
            width: 25%;
        }

        .item img{
            width: 100%;
        }

这样也可以实现所想要的效果