Menu
  • 注册
  • CSS CSS 关注:1 内容:4

    使用 Multi-columns 实现瀑布流

  • 查看作者
  • 打赏作者
  • 拉黑名单
    • 3举人
      超级会员
      博主

      使用 Multi-columns 实现瀑布流

      使用这个 CSS3 的特性只能实现简单的效果。如果要实现较好的效果,目前还是推荐使用 JS。

      我们先来看一下要应用瀑布流的一个 HTML 结构

      <div class="masonry">
          <div class="item">
              <div class="item__content">
              </div>
          </div>
          <div class="item">
              <div class="item__content">
              </div>
          </div>
          <!-- more items -->
      </div>

      实现瀑布流的 CSS

      .masonry {
          column-count: 5;
          column-gap: 0;
          counter-reset: item-counter;
      }
      .item {
          break-inside: avoid;
          box-sizing: border-box;
          padding: 10px;
          counter-increment: item-counter;
      }

      如果要实现响应式,那就需要应用到媒体查询,来更改 column-count 的列数。

      请登录之后再进行评论

      登录