来源：图像嵌入img元素

6……我以前一直认为瀑布流需要用JS实现，直到我知道了这个，让我明白我还是太嫩了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .waterfall {
      column-count: 7;
    }
    .waterfall img {
      width: 100%;
      margin: 5px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="waterfall">
    <!-- 总之就是很多图 -->
  </div>
</body>
</html>

效果很好，但有个问题：这些图片的排列方式变成了按列排列，而不是默认的按行，如果往末尾插入新图片，新图片会堆积在最后一列、旧图片会被挤到前面的列；这不符合一贯的页面浏览习惯，用户总是希望最新加载的数据在最下面

因此，如果需求中通过分页器显示内容，则可以这么玩；如果需求为触底加载新内容，那还是老老实实地JS瀑布流吧