純CSS響應(yīng)式瀑布流 columns

番茄西紅柿發(fā)布于2019-05-23 15:55 / 1268人閱讀

摘要：效果圖縮小一點(diǎn)板端雞端瘋六這個響應(yīng)式瀑布流誤打誤撞寫出來的，因?yàn)橹翱窗俣葘戇^瀑布流，不太好，好復(fù)雜，又要什么的，我就懶，算了算了，不寫了。

效果圖

PC 1366*768

縮小一點(diǎn)

板端

雞端瘋六

這個響應(yīng)式瀑布流誤打誤撞寫出來的，因?yàn)橹翱窗俣葘戇^瀑布流，不太好，好復(fù)雜，又要JS什么的，我就懶，算了算了，不寫了。

然后今天早上就看完數(shù)據(jù)結(jié)構(gòu)教程，無聊，順便看慕課網(wǎng)的瀑布流教程，發(fā)現(xiàn)一般般，不過學(xué)到了用columns，然后又谷歌到了 break-inside 額，發(fā)現(xiàn)很OK喔，就OK了。

我習(xí)慣寫注釋在代碼那里，這樣感覺容易看懂些，不然看一下代碼，看一下解釋，麻煩。

滾到最下面是全部代碼。

CSS代碼：核心 * { margin: 0; padding: 0; }
.waterfalls { padding:10px; position: relative; margin: 0 auto; columns:200px; /* 每列每個元素最小的寬度 */ column-gap: 20px; /* 每列的距離，不設(shè)置這個可以通過margin來設(shè)置邊距 */ }
.box { break-inside: avoid; /* 這個是設(shè)置多列布局頁面下的內(nèi)容盒子如何中斷，如果不加上這個，每列的頭個元素就不會置頂，配合columns使用 */ margin-bottom:15px;

/* 如果是非圖片瀑布流的話就加上背景吧，不然感覺不太好看。 */

/* background:dodgerblue; */ color:white; border-radius:5px; }
.pic img { width: 100%; /* 建議每個圖片寬高為100%，如果不設(shè)置寬高，就會溢出外層盒子的，或者設(shè)置固定寬度，最好不要寬過外層盒子或者高過外層盒子。這里說的外層盒子就是html代碼里的 .box */ height: 100%; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } 不加一些樣式的問題：

不加 break-inside: avoid;

就是每列元素不置頂嘛，而break-inside: avoid; 我也是剛學(xué)的，不太大懂意思