- A+
所属分类：Web前端
jquery时代大多使用插件实现瀑布流布局，但现在我们可以直接使用存粹的css来实现。从css3开始出现了column-count与column-gap后，我们便可直接使用此属性来进行布局，其中column-count代表列数，column-gap代表列之间的距离。值得注意的是，当使用column-count时，容器中不只一个元素时，列末尾容器中一部分元素可能会断裂至另一列中，为防止此种情况发生可以使用break-inside: avoid，避免容器断裂成两部分。
各大浏览器支持程度：
实例：
html代码
<div class="wrapper"> <div class="task-container"> <!--遍历任务列表--> <div v-for="(item, index) in taskData" :key="index" class="tasks"> <div class="task-div"> <!--任务标签--> <span :style="{ backgroundColor: tagColorList[Math.floor(Math.random() * tagColorList.length)], }" v-for="tag in item.tag" :key="tag" >{{ tag }} </span> <img v-if="item.img" :src="taskImgLis[Math.floor(Math.random() * taskImgLis.length)]" /> <h1>{{ item.tit }}</h1> <p>{{ item.con }}</p> <a href="#">Detalies</a> </div> </div> </div> </div> css代码
<style scoped lang='scss'> .wrapper { margin: 5px auto; width: 98%; height: 99%; overflow: auto; .task-container { margin: 10px auto; width: 99%; column-count: 4; /*表示分割的列数 */ column-gap: 0px;/*表示列之间的间隔*/ .tasks { break-inside: avoid; /*防止元素内部断裂成第二列*/ margin: 0px 20px 30px 20px; background-color: #eff6ff; border-radius: 10px; padding: 10px; .task-div { span { margin: 10px 10px 10px 0px; padding: 3px 5px; background-color: #ffe5d3; border-radius: 5px; } img { margin: 10px auto; width: 100%; border-radius: 10px; } p { color: #aaa; margin: 0px 0px 10px 0px; } a { padding: 10px 0px 0px 0px; text-decoration: none; color: #4c33e6; } } } } } .wrapper::-webkit-scrollbar { /*滚动条整体*/ width: 5px; height: 5px; } .wrapper::-webkit-scrollbar-track { /*滑轨*/ background-color: #ccc; border-radius: 30px; } .wrapper::-webkit-scrollbar-thumb { /*滑块*/ background-color: rgba(0, 0, 0, 0.6); border-radius: 30px; cursor: pointer; } </style> 
