作者：MudOnTire
轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000023103516
前言
瀑布流提供了一種錯(cuò)落有致的美觀布局，被各種注重交互品味的素材網(wǎng)站（如：花瓣、unsplash）廣泛應(yīng)用。社區(qū)也提供了不少瀑布流布局的工具，如：masonry 、colcade 等。常規(guī)的實(shí)現(xiàn)瀑布流的做法是用 JS 動(dòng)態(tài)的計(jì)算“磚塊”的尺寸和位置，計(jì)算量大、性能差。今天給大家介紹一種使用純 css 實(shí)現(xiàn)瀑布流的方法，簡(jiǎn)潔優(yōu)雅。主要使用到了 CSS 中的多列屬性 columns。
在使用一個(gè)比較陌生的 CSS 屬性之前，習(xí)慣性的了解一下它的兼容性，去 caniuse.com 瞅一眼：
看著兼容性還不錯(cuò)，那就放心的用吧。
html
先構(gòu)造頁(yè)面結(jié)構(gòu)：
<div class="masonry">
<div class="item">
<img src="http://source.unsplash.com/random/400x600" />
<h2>Title Goes Here</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis quod et
deleniti nobis quasi ad, adipisci perferendis totam, ducimus incidunt
dolore aut, quae quaerat architecto quisquam repudiandae amet nostrum
quidem?
</p>
</div>
...more...
</div>
在 div.masonry 容器中可以塞進(jìn)任意多的 “磚塊” div.item，“磚塊” 中的圖片可以從 unsplash 中隨機(jī)獲取，且可以制定圖片的尺寸。
CSS
容器：
.masonry {
width: 1440px; // 默認(rèn)寬度
margin: 20px auto; // 劇中
columns: 4; // 默認(rèn)列數(shù)
column-gap: 30px; // 列間距
}
磚塊：
.item {
width: 100%;
break-inside: avoid;
margin-bottom: 30px;
}
.item img {
width: 100%;
}
.item h2 {
padding: 8px 0;
}
.item P {
color: #555;
}
上面的樣式其他都挺好理解，唯獨(dú) break-inside 這個(gè)屬性比較陌生。讓我們看一下去掉 break-inside 之后會(huì)有什么問(wèn)題吧：
可以看到有兩個(gè)“磚塊”的文字跑到上面和圖片分開(kāi)了。所以當(dāng)設(shè)置了 break-inside: avoid 之后可以避免“磚塊”內(nèi)部的內(nèi)容被斷開(kāi)。
不同屏幕尺寸適配
以上樣式默認(rèn)適配 PC，在其他尺寸設(shè)備上需要重新設(shè)置列數(shù)、列間距等樣式，可以通過(guò) media query 進(jìn)行適配，比如：
ipad pro:
@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
.masonry {
width: 96vw;
columns: 3;
column-gap: 20px;
}
}
ipad:
@media screen and (min-width: 768px) and (max-width: 1023.98px) {
.masonry {
width: 96vw;
columns: 2;
column-gap: 20px;
}
}
mobile:
@media screen and (max-width: 767.98px) {
.masonry {
width: 96vw;
columns: 1;
}
}
注意：屏幕尺寸區(qū)間不要有交集，也不要有缺口！
好了，大功告成，來(lái)張全家福!
作者：MudOnTire
轉(zhuǎn)發(fā)鏈接：https://segmentfault.com/a/1190000023103516
