通过 Multi-columns 相关的属性 column-count
、column-gap
配合 break-inside
来实现瀑布流布局。
首先对包裹图片的盒子增加样式,column-count
表示瀑布流列的数量;column-gap 表示瀑布流列的间隔
:
.img-container {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
-moz-column-gap: 18px;
-webkit-column-gap: 18px;
column-gap: 18px;
display:inline-block;
}
接着设置瀑布流的宽度、行的间距以及瀑布高度不够时的断点:
.img {
width: 240px;
height: auto;
margin-bottom: 8px;
-moz-page-break-inside: avoid;
-webkit-column-break-inside: avoid;
break-inside: avoid;
}
最后别忘记通过媒体监听来进行瀑布流的响应式处理:
@media screen and (max-width: 1024px) {
.img-container {
-moz-column-count:2 !important; /* Firefox */
-webkit-column-count:2 !important; /* Safari 和 Chrome */
column-count:2 !important;
}
}@media screen and (max-width: 768px) {
.img-container {
-moz-column-gap: 8px !important;
-webkit-column-gap: 8px !important;
column-gap: 8px !important;
}
}
最终效果如下图:
* 由于这种方法只能实现纵向的排序方式,一般应用于少量的图片展示。如果是需要滚动刷新那样大量数据的应用场景,对用户来说这样的体验是很不好的,需要通过JS实现左至右排序的瀑布流布局。