瀑布流布局是什么

瀑布流布局是一种常见的网页布局方式，视觉上给人一种参差不齐的多栏的效果,常用于图片为主的版块，如下图。

ok~ 现在我来试着做一做 🧐

代码实现

基本代码

环境 Chrome 81.0.4044.138

html

1  <main></main>
2

css

1* {
2  box-sizing: border-box;
3}
4
5main {
6  width: 600px;
7  padding: 5px;
8  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.15);
9}

javascript

1// 用于生成随机颜色
2const getRandomColor = () =>
3  `#${Math.random()
4    .toString(16)
5    .slice(2, 8)}`;
6
7// 用于生成随机高度
8const genRandomHeight = () => `${Math.ceil(Math.random() * 100 + 15)}px`;
9
10const mainEl = document.querySelector("main");
11// 生成100个div，方便查看效果
12mainEl.innerHTML = Array.from({ length: 100 }, (x, i) => {
13  return `
14    <div class="item" style="background: ${getRandomColor()}; height: ${genRandomHeight()}">
15      ${i}
16    </div>`;
17}).join("");

好了，现在我得到了下面的画面，看起来也像瀑布流，参差不齐，除了没有多列😀

columns实现

我们还缺少一个多列，很容易想到css的多列布局columns，那么事情就简单起来了。

在css文件，main元素里加上一句

1main {
2  // ...
3  columns: 12;
4}

emmm~ 好像很容易就实现了，不过等等，32、39、58、66、84、92这几个div好像被腰斩了，而且元素的排序是从上往下，而不是人们熟悉的从左到右🤔

查看CSS Multi-column Layout Module Level 1规范后，多列布局会为子元素的内容生成 anonymous fragmentation containers匿名盒子，溢出的内容会被分段，换列显示，想要控制分段，可以使用break-inside: avoid;（参考column-break-values）

css文件中加入这一句

1main {
2  // ...
3  break-inside: avoid;
4}

考虑到浏览器对break-inside的支持不太好，可以试用

1.item {
2  display: inline-block;
3  width: 100%;
4}

缺点就是会出现白色间隙。

grid实现

通过columns实现瀑布流布局，一大缺点是不方便改变子元素的顺序从左往右，这时可以试用grid来实现。

基本代码不变

1main {
2  // ...
3  // width: 600px; 去掉这个固定宽度，这里可以不使用，
4  display: grid;
5  // auto-fill尽可能的填充列，列的最小宽度应为40px，最大1fr，灵活的调整，让每列宽度相同
6  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
7  grid-auto-rows: 40px;
8  grid-gap: 5px;
9}

现在我有了一个简单的grid布局，它保持了给定的顺序，并且会自动根据浏览器宽度调整列数。同时，我们也发现了几个问题，因为行高固定，所有有溢出的div，同时有些div高度不到行高，所以会有丑陋的白色间隙，当下，grid布局是不会让子元素自动跨越行，所以要人工干预，我需要调整每一个div，让他们跨越不同的行数，比如grid-row-end: span 2;。

这里需要使用js来动态设置每个div所跨越的行数。

1// 获取行高与间距，目前行高是40px，间距是5px
2const rowHeight = parseInt(
3  getComputedStyle(mainEl).getPropertyValue("grid-auto-rows")
4);
5const rowGap = parseInt(
6  getComputedStyle(mainEl).getPropertyValue("grid-row-gap")
7);
8
9const setSpan = el => {
10  // 计算div需要跨越的行数
11  el.style.gridRowEnd = `span ${Math.ceil(
12    (el.clientHeight + rowGap) / (rowHeight + rowGap)
13  )}`;
14};
15
16document.querySelectorAll(".item").forEach(setSpan);

很好，我们计算出了div能完全显示的最小行数，但还有有很多间隙，因为我们的行高设置的40px，计算不精确，所以最终的解决方案是将行高设置为较小的数。

1main {
2  // ...
3  // 原来是40px，现在改为1px
4  grid-auto-rows: 1px;
5}

🎉🎉看起来不错~

CSS瀑布流布局