文字,图片,块级都可以用CSS搞成瀑布流
<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 容器中可以塞进任意多的 “砖块” div.item,“砖块” 中的图片可以从 unsplash 中随机获取,且可以制定图片的尺寸。
容器:
.masonry {
width: 1440px; // 默认宽度
margin: 20px auto; // 剧中
columns: 4; // 默认列数
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;
}
不同屏幕尺寸适配
以上样式默认适配 PC,在其他尺寸设备上需要重新设置列数、列间距等样式,可以通过 media query 进行适配,比如:
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;
}
}
搬自知乎:https://zhuanlan.zhihu.com/p/157329149
进行修改