CSS方式实现瀑布流
更新:HHH   时间:2023-1-7


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <style>
    body {
      margin: 0;
    }

    .container {
      /* 分几列 */
      column-count: 3;
      /* 每列之间的距离 */
      column-gap: 10px;
    }

    .item {
      /* 避免当前元素的中断点 */
      break-inside: avoid-column;
      width: 100%;
      margin-bottom: 10px;
      background: #eee;
      text-align: center;
      color: black;
      font-size: 40px;
    }
  </style>
</head>

<body>
 <div class="container">
    <div class="item" >1</div>
    <div class="item" >2</div>
    <div class="item" >3</div>
    <div class="item" >4</div>
    <div class="item" >5</div>
    <div class="item" >6</div>
    <div class="item" >7</div>
    <div class="item" >8</div>
    <div class="item" >9</div>
    <div class="item" >10</di>
    </div>
</body>

</html>

效果图

返回开发技术教程...