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

巴特西

CSS001. 纯CSS实现瀑布流（纵向排序）

- END -

最新文章

热门文章