通过 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实现左至右排序的瀑布流布局。
- END -