乐趣区

关于css:纯css实现简单瀑布流flex-和-columncount-两种方式

jiezi

形式一：column-count 实现

这种实现形式的毛病是：图片是先从上到下排列，再从左到右排列的

    <!DOCTYPE html>
<html>
  <head></head>
  <style>
    .pubuliu {
      column-count: 4;
      list-style: none;
      counter-reset: item;
    }

    .pubuliu li {
      break-inside: avoid;
      margin-bottom: 4px;
    }
    .pubuliu li::before {
      display: block;
      counter-increment:item;
      content: counter(item);
      color:black;
    }
    .h100 {
      height: 100px;
      background:yellow;
    }
    .h200 {
      height: 200px;
      background: red;
    }
    .h300 {
      height: 300px;
      background:violet;
    }
    .h400 {
      height: 400px;
      background:tomato;
    }
  </style>
  <body>
    <ul class="pubuliu">
      <li class="h100"></li>
      <li class="h400"></li>
      <li class="h300"></li>
      <li class="h100"></li>
      <li class="h200"></li>
      <li class="h100"></li>
      <li class="h400"></li>
      <li class="h300"></li>
      <li class="h100"></li>
      <li class="h200"></li>
    </ul>
  </body>
</html>

形式二：flex 布局 + 巧用 order 属性实现

这种形式能够实现从左到右
毛病：须要事后设定 flex 容器的高度，保障想要列数，且调整页面大小时会呈现一些间距过大的问题

<!DOCTYPE html>
<html>
  <head></head>
  <style>
    .pubuliu {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height:800px;
      list-style: none;
      counter-reset: item;
    }

    .pubuliu li {margin-bottom: 4px;}
    .pubuliu li::before {
      display: block;
      counter-increment:item;
      content: counter(item);
      color:black;
    }
    .pubuliu li:nth-child(4n+1) {order: 1;}
    .pubuliu li:nth-child(4n+2) {order: 2;}
    .pubuliu li:nth-child(4n+3) {order: 3;}
    .pubuliu li:nth-child(4n+4) {order: 4;}
    .h100 {
      height: 100px;
      background:yellow;
    }
    .h200 {
      height: 200px;
      background: red;
    }
    .h300 {
      height: 300px;
      background:violet;
    }
    .h400 {
      height: 400px;
      background:tomato;
    }
  </style>
  <body>
    <ul class="pubuliu">
      <li class="h100"></li>
      <li class="h400"></li>
      <li class="h300"></li>
      <li class="h100"></li>
      <li class="h200"></li>
      <li class="h100"></li>
      <li class="h400"></li>
      <li class="h300"></li>
      <li class="h100"></li>
      <li class="h200"></li>
    </ul>
  </body>
</html>
退出移动版