css實(shí)現(xiàn)瀑布流布局

作者 | 李美超
鏈接 |? https://blog.limeichao.cn/article/ec28b177.html

實(shí)現(xiàn)思路

依賴 column 便可實(shí)現(xiàn)最簡(jiǎn)單實(shí)用的瀑布流布局。

代碼

我這里前端框架用的是 vue, 用其他的也一樣。
html

        
             :style="{height:heights[Math.floor(Math.random()*4)] + 'px',background:colors[Math.floor(Math.random()*12)]}"             :key="index">            {{item}}        

Script

css

column-count: 3; 內(nèi)容均分三份
column-gap: 10px; 列之間的間距
效果:

此時(shí)你會(huì)發(fā)現(xiàn) 8 和 15 分頭行動(dòng)了，此時(shí)還需要給子元素加一個(gè)屬性

break-inside: avoid;

這樣就不會(huì)被分割了
如下:

具體需要什么效果看自己需求取舍就行。

兼容問(wèn)題

肯定會(huì)有小伙伴說(shuō)你這兼容性不行啊，ie 10 以下怎么辦？
解決辦法也不是沒(méi)有，
那就是:
以后面試的時(shí)候先問(wèn)好需不需要兼容 ie, 如果需要，趕緊撤乎，從根本上解決問(wèn)題，還能省幾根頭發(fā)。

本文完?