关于CSS3中Columns实现瀑布流布局

简单实现

场景：需要对一下等宽不等长的块进行瀑布流布局。
html代码（只是简单的写了一下，这里可以用v-for）

<div class="contents_list">
	<div class="content_one">
		<img src="******"/>
		<p>一些对图片的描述文字p>
	div>
	<div>
		<img src="******"/>
		<p>一些对图片的描述文字p>
	div>
	<div>
		<img src="******"/>
		<p>一些对图片的描述文字p>
	div>
div>

使用Columns的话是纯css的实现

大部分的博客的css的写法

.contents_list{
     
	column-count: 2;  /* 把这个div下面的元素拆分为两列 */
    column-gap: 2%;	  /* 列与列之间的距离 */
}
.content_one{
     
	break-inside: avoid;  /* 这个div下的元素视为整体不被拆分 */
}

ps：本人是搞后端的，这后面的注释都是个人在这个情景下的理解，肯定是不准确的，可以自己去百度这个样式的具体说明，许多博客上都写得很清除。

问题1：break-inside兼容问题

因为兼容的问题，很多浏览器现在是不支持使用break-inside: avoid的。
所以这里可以用display: inline-block来代替。

ps：这个display: inline-block是可以实现，大家在使用的时候最好去百度一下这个的用法和意思，解决这个问题只需要用这个替换break-inside就好了。

问题2：column-count下的元素跨列显示

具体实现效果和场景类似于这样
不同图片和图片的描述是被分为两列。
但是下面的提示信息却显示在中间，这里是使用了columns的跨列显示
实现很简单：这里直接上一段我项目里面的代码好了

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
	<van-list
	 v-model="loading"
     :finished="finished"
     offset=5
     @load="onLoad"
     class="contents_list">
    	<div v-for="(item,index) in list" :key="index" class="content_one">
        	<router-link :to="{path:'/content/', query:{id:item.content_id}}">
            	
            	<img style="width:100%;border-radius:3%" :src="item.image" alt=""><br/>
            	
            	<span style="font-size:80%; font-weight:bold; word-wrap:break-word; word-break:break-all">
            		{
    { item['title'] }}<br/>
            		
            		<span style="font-size:80%;width:70%;height:100%">
            			<img :src="item.writer_image" alt="" 
              	  		  style="width:18%;height:18%;border-radius:100%;float:left">
            			<span style="float:left;margin-top:5%">{
    { item['writer_name'] }}span>
                    span>
                    
                    <span style="font-size:80%;width:30%;height:100%">
                    	<span style="float:right;margin-top:5%">{
    { item['goods'] }}span>
                        <img src="../../assets/themes/images/good.png" alt="" 
                          style="width:18%;height:18%;border-radius:100%;float:right">
                    span>
                span>
            router-link>
        div>
        <p slot="loading" style="column-span:all">waitingp>
        <p slot="finished" style="column-span:all">我是有底线的p>
    van-list>
van-pull-refresh>

可能直接看我的代码比较难看懂，这里实现就是对加载完后的提示语句的p标签加了一个column-span:all的样式
column-span是跨列展示
默认值为none，就是不允许跨列，all就是允许跨所有的列，就可以实现居中展示。
ps：这边就建议大家去看看column的相关的一下样式了，稍微百度去找一下就能找到了。

总结

这种实现瀑布流布局特别简单，然后还可用flex布局去实现。这两种是纯css的。
还可以通过css+js去实现，就比较复杂。
看很多博客说上面两种不能很好的展示动态的数据，css+js的就可以，这里我没去做验证。

就是这么多了，可能讲得不是很清楚，主要是自己碰到了这些问题，如果你们也恰好碰到了就可以帮到你们，就算看不懂也能有一个百度的关键词对吧。然后因为我是搞后端的，只是自己写自己项目的前端，所以很多东西都是边学边用没办法给大家解释清除，所以有什么说得不对的也请大家多多指出，有看不懂的也及时评论，我会尽我所能帮助大家