简易瀑布流布局

代码

<style>
  .container {
    column-count: 4; /* 定义列数 */
    column-gap: 16px; /* 定义列与列之间的间隙 */
  }
  .item {
    background-color: #f2f2f2;
    padding: 8px;
    margin-bottom: 16px; /* 定义每项的底部间隙 */
    break-inside: avoid; /* 防止内容被分割到不同的列 */
  }
</style>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
  <div class="item">Item 13</div>
  <div class="item">Item 14</div>
  <div class="item">Item 15</div>
</div>

效果

Item 1

Item 2 Item 2 Item 2 Item 2 Item 2 Item 2 Item 2

Item 3

Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4 Item 4

Item 5

Item 6

Item 7

Item 8

Item 9 Item 9 Item 9 Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15