master

分支 (2)

管理

管理

master

develop

note
/
waterfall-flow.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex实现瀑布流布局</title>
  <style>
    /** 瀑布流布局 */
    .masonry {
      display: flex;
      /* 父元素水平排列 */
      flex-direction: row;
      /* HACK: 避免图片之间出现1px间隙 */
      font-size: 0;
    }

    /** 行布局 */
    .column {
      display: flex;
      /* 子元素垂直排列 */
      flex-direction: column;
      /* ----三列的情况下 */
      width: calc(100%/3);
    }

    img {
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div class="masonry">
    <div class="column">
      <div class="item">
        <img src="./src/image/1.jpg" />
      </div>
      <div class="item">
        <img src="./src/image/2.jpg" />
      </div>
      <div class="item">
        <img src="./src/image/3.jpg" />
      </div>
    </div>
    <div class="column">
      <div class="item">
        <img src="./src/image/4.jpg" />
      </div>
      <div class="item">
        <img src="./src/image/5.jpg" />
      </div>
      <div class="item">
        <img src="./src/image/6.jpg" />
      </div>
    </div>
    <div class="column">
      <div class="item">
        <img src="./src/image/7.jpg" />
      </div>
      <div class="item">
        <img src="./src/image/3.jpg" />
      </div>
      <div class="item">
        <img src="./src/image/default.jpg" />
      </div>
    </div>
  </div>
</body>

</html>