戴兜

戴兜的小屋

Coding the world.
github
bilibili
twitter
主页归档关于NFT

CSS Layout API初探：瀑布流布局实现

#技术472
AI 生成的摘要
这篇文章介绍了CSS Layout API的使用方法和相关知识。作者在自己的项目中使用了瀑布流布局，并通过CSS Layout API实现了更优雅的布局方式。文章提到了Typed OM和CSS Properties and Values API这两个与CSS Layout API相关的接口，以及如何注册自定义的CSS属性。最后，文章介绍了CSS Layout API的具体用法和参数。

image

自己在写的小项目中有瀑布流的需求，不久之前刚刚完成瀑布流的布局部分，这部分代码也已经上传到了Github gist。写的时候我就在思考：如果能有更优雅的方式快速实现瀑布流布局该多好。于是，我便想到了之前无聊时翻看 MDN 时，CSS Houdini 里边所描述的 CSS Layout API。正好最近刚写完瀑布流，实践起来比较方便。

警告

CSS Layout API 目前还是 First Public Working Draft，本文所述内容在将来随时可能过时。

警告

目前没有 ** 任何 ** 浏览器支持该特性，为了正常展示本文所述的所有 demo，你需要使用 edge/chrome 浏览器并在 flags 中将 Experimental Web Platform features 启用。

〇. 结果#

因为这篇文章前戏很长，所以将结果放在了最前面呈现，完整的示例可以前往 https://masonry.daidr.me 查看。

Github Repo not found

The embedded github repo could not be found…

image

如果将来浏览器支持了该特性，那么使用瀑布流布局将会是一件易如反掌的事情，你需要做的，仅仅是

  • 引入 masonry.js
  • 准备一个父级容器，和一些瀑布流元素（例如卡片）
  • 为这个父级元素加上一个布局样式。
<script src="masonry.js" />

<div class="container">
    <div class="card">瀑布流元素</div>
    <div class="card">瀑布流元素</div>
    <div class="card">瀑布流元素</div>
    <!-- ... -->
</div>

<style> .container {
    display: layout(masonry);
} </style>

Ⅰ. 一些新的知识#

坑#

我兴致冲冲地去 MDN 翻阅与 CSS Layout API 相关的文档，结果发现… 居然什么都没有😵‍💫 … 既然没有的话，直接去 w3c 上看看吧，于是，我打开了https://www.w3.org/TR/css-layout-api-1，结果经过我的一番尝试，连里边的示例都没法正常使用，才发现这个文档也过时了😒

不过好在Editor’s Draft里面的内容一直在更新，这才让我有了继续写下去的动力。那么，让我们开始吧！

Typed OM#

不知道大家在使用 js 操作样式时，是否会感到百般别扭：

let newWidth = 10;
element1.style.width = `${newWidth}px`

因为返回的是字符串，进行运算的时候总是很狼狈，傻傻搞不清楚font-size/fontSize/margin-top/marginTop，更别提各种数值和单位的拼接，我已经不止一次犯过下面这样的错误了：

element2.style.opacity += 0.1;

Typed OM 便可以来解决我们直接操作 CSSOM 时发生的诸多不愉快。你可以通过元素的 attributeStyleMap 属性获取到一个StylePropertyMap对象，之后，便可以以 map 的方式读取元素的样式了。

element3.attributeStyleMap.get('opacity'); // CSSUnitValue {value: 0.5, unit: 'number'}
element3.attributeStyleMap.get('width'); // CSSUnitValue {value: 10, unit: 'px'}

返回的是一个CSSUnitValue对象（也可能是CSSMathValue或其子类的对象），我们可以很轻松地获取到属性值的数值部分，简化我们的操作。浏览器甚至能够自动转换 em、rem 等相对单位，得到绝对单位数值。我们还可以通过CSSUnitValue内置的 to 方法，进行快速的单位转换。不仅如此，浏览器还提供了大量的工厂方法来规范化表达 css 的属性值，比如我们的第一个例子，使用 Typed OM 进行操作就会是下面的样子。

let newWidth = 10;
element1.attributeStyleMap.set('width', CSS.px(newWidth));

舒服多了。在使用 CSS Layout API 的过程中，我们会经常看到 Typed OM 的身影。在 MDN 可以找到 Typed OM 相关的文档

CSS Properties and Values API#

这个接口能够让我们注册一些自定义的 css 属性，并定义格式和默认值。

CSS.registerProperty({
    name: "--masonry-gap",   // 自定义属性的名称
    syntax: "<number>",      // 自定义属性的格式
    initialValue: 4,         // 默认值
    inherits: false          // 是否从父元素继承
});

不仅可以在 JavaScript 中使用该接口，浏览器也提供了自定义属性值的 At Rule

@property --masonry-gap {
    syntax: '<number>';
    initial-value: 4;
    inherits: false;
}

自定义属性注册完成后，之后再通过 Typed OM 操作样式，浏览器便会按照你所提供的格式，返回对应的CSSUnitValue（或CSSMathValue）对象。倘若不这么做，浏览器将会返回一个携带原始 css 属性值的CSSUnparsedValue对象。

syntax 字符串的内容其实很简单，syntax 由一堆 syntax component 组成，默认情况下，syntax 字段的内容是 *。除此之外，还可以使用 | 来表示或， + 来表示接受使用空格分割的属性值， # 表示接受使用逗号分割的属性值。这里的 syntax 仅仅是Value Definition Syntax的一个子集。更详细的资料，可以去草案的第五节详细了解。

CSS Layout API#

终于到了咱们的重头戏！布局的相关逻辑需要使用浏览器提供的 Worklet 接口，这个接口允许脚本独立于 js 运行环境，进行诸如绘图、布局、音频处理等需要高性能的操作。所以，我们需要一个脚本，用于将布局逻辑相关的代码载入到 LayoutWorklet 中。（别忘了检查一下浏览器兼容性）

// masonry.js

if ('layoutWorklet' in CSS) {
    CSS.layoutWorklet.addModule('layout-masonry.js');
}

接下来就是需要被载入到 LayoutWorklet 中的代码

// layout-masonry.js

registerLayout('masonry', class {
    // 在这里声明之后你需要读取的css属性
    static inputProperties = ['--masonry-gap', '--masonry-column'];

    // 这个方法用于在弹性布局中确定元素尺寸，可以空着，但不能没有
    async intrinsicSizes(children, edges, styleMap) { }

    // 布局逻辑
    async layout(children, edges, constraints, styleMap, breakToken) { }
});

这样我们就创建了一个名为 masonry 的布局方式，上面两段代码可以看作是一套模板，直接拿来用就行。

接下来就是噩梦了🤯 ，layout 的这几个参数是什么，该如何操作？好在草案写得足够详细，也提供了一些示例以供参考。（这篇文章不会讨论 breakToken 的用法）

children#

是一个许多LayoutChild对象组成的数组，代表着容器内的所有子元素。LayoutChild主要包含下面这些属性或方法

LayoutChild.intrinsicSizes()

返回一个 promise，用以得到IntrinsicSizes对象，可以获取元素的最大 / 最小尺寸

LayoutChild.layoutNextFragment(constraints, breakToken)

返回一个 promise，用以得到LayoutFragment对象，LayoutFragment对象主要包含下面这些属性：

  • LayoutFragment.inlineSize：子元素内联方向上的尺寸，即宽度（只读）
  • LayoutFragment.blockSize：子元素块级方向上的尺寸，即高度（只读）
  • LayoutFragment.inlineOffset：子元素内联方向上的偏移
  • LayoutFragment.blockOffset：子元素块级方向上的偏移，布局主要就靠这两个偏移了

LayoutChild.styleMap

返回一个StylePropertyMapReadOnly对象，用来操作子元素的样式

edges#

是一个LayoutEdges对象（属性均只读），用来获取容器内外边距、滚动条导致的 content box 与 border box 产生的距离

  • LayoutEdges.inlineStart：内联起始方向的距离
  • LayoutEdges.inlineEnd：内联结束方向的距离
  • LayoutEdges.blockStart：块级起始方向的距离
  • LayoutEdges.blockEnd：块级结束方向的距离
  • LayoutEdges.inline：内联方向的距离和
  • LayoutEdges.block：块级方向的距离和

可能不是很直观，这里放一张草案里提供的 rtl 方向下的图（和 ltr 正好相反）：

image

constraints#

是一个LayoutConstraints对象（属性均只读），用来获取元素（这里是指容器）的尺寸信息

  • LayoutConstraints.availableInlineSize：内联方向上的可用尺寸
  • LayoutConstraints.availableBlockSize：块级方向上的可用尺寸
  • LayoutConstraints.fixedInlineSize：内联方向上的确定尺寸
  • LayoutConstraints.fixedBlockSize：块级方向上的确定尺寸
  • LayoutConstraints.percentageInlineSize：内联方向上的尺寸（百分比表示）
  • LayoutConstraints.percentageBlockSize：块级方向上的尺寸（百分比表示）

不过似乎目前浏览器提供的 LayoutConstraints 对象只能获取到 fixedInlineSize 和 fixedBlockSize 这两个属性…

styleMap#

是一个 StylePropertyMapReadOnly 对象，用来操作容器的样式

Ⅱ. 开始实现瀑布流#

使用 CSS Layout API 实现瀑布流的基本逻辑其实和其他实现方式基本是一致的。

我们先来定义两个自定义属性，方便之后进行属性值的格式化。

顺便把 layout-masonry.js 载入到 layoutWorklet 中

// masonry.js

if ('layoutWorklet' in CSS) {
    CSS.registerProperty({
        name: '--masonry-column',
        syntax: '<number>',
        inherits: false,
        initialValue: 4
    });

    CSS.registerProperty({
        name: '--masonry-gap',
        syntax: '<length-percentage>',
        inherits: false,
        initialValue: '20px'
    });

    CSS.layoutWorklet.addModule('layout-masonry.js');
}

接下来的所有代码若没有额外说明则均在 layout-masonry.js 的 layout 逻辑内部。

首先，我们来获取容器的内容盒子宽度：

// 获取容器的可用宽度（水平尺寸 - 左右内边距之和）
const availableInlineSize = constraints.fixedInlineSize - edges.inline;

接下来，我们来获取瀑布流列数（因为值是整数且默认值为 4，我们无需做任何处理，读进来就好）

//获取定义的瀑布流列数
const column = styleMap.get('--masonry-column').value;

接着，我们需要得到每列的间距，此时情况就复杂了。不过好在所有相对单位和绝对单位在传入时都会自动转换成 px，所以实际上我们只需要处理百分比和 calc 函数，css 里边的 calc 函数是支持嵌套的，所以我们这里使用递归来完成计算，同时将百分比转换为像素值。

// layout-masonry.js 外部
function calc(obj, inlineSize) {
    if (obj instanceof CSSUnitValue && obj.unit == 'px') {
        return obj.value;
    } else if (obj instanceof CSSMathNegate) {
        return -obj.value;
    } else if (obj instanceof CSSUnitValue && obj.unit == 'percent') {
        return obj.value * inlineSize / 100;
    } else if (obj instanceof CSSMathSum) {
        return Array.from(obj.values).reduce((total, item) => total + calc(item, inlineSize), 0);
    } else if (obj instanceof CSSMathProduct) {
        return Array.from(obj.values).reduce((total, item) => total * calc(item, inlineSize), 0);
    } else if (obj instanceof CSSMathMax) {
        let temp = Array.from(obj.values).map((item) => calc(item, inlineSize));
        return Math.max(...temp);
    } else if (obj instanceof CSSMathMin) {
        let temp = Array.from(obj.values).map((item) => calc(item, inlineSize));
        return Math.min(...temp);
    } else {
        throw new TypeError('Unsupported expression or unit.')
    }
}

// 获取定义的瀑布流间距
let gap = styleMap.get('--masonry-gap');
// 将计算属性和百分比处理成像素值
gap = calc(gap, availableInlineSize);

我们需要根据列数和间隔计算出子元素的宽度

// 计算子元素的宽度
const childAvailableInlineSize = (availableInlineSize - ((column + 1) * gap)) / column;

下面的代码可以算是模板，我们需要获取子元素的 fragment，只有这样我们才可以修改子元素的偏移

// 设定子元素宽度，获取fragments
let childFragments = await Promise.all(children.map((child) => {
    return child.layoutNextFragment({ availableInlineSize: childAvailableInlineSize });
}));

紧接着，就是瀑布流的逻辑了，基本上所有瀑布流的逻辑是类似的。在我的Github gist中 vue 的版本也是这么实现的。我们需要记录每一列的当前高度，在布局新元素时，选取其中最短的一列进行插入操作（倘若按照顺序插入会导致每列的高度差距过大）

// 设定子元素宽度，获取fragments
let childFragments = await Promise.all(children.map((child) => {
    return child.layoutNextFragment({ availableInlineSize: childAvailableInlineSize });
}));

let autoBlockSize = 0; //初始化容器高度
const columnHeightList = Array(column).fill(edges.blockStart); //初始化每列的高度，用容器的上边距填充
for (let childFragment of childFragments) {
    // 得到当前高度最小的列
    const shortestColumn = columnHeightList.reduce((curShortestColumn, curValue, curIndex) => {
        if (curValue < curShortestColumn.value) {
            return { value: curValue, index: curIndex };
        }

        return curShortestColumn;
    }, { value: Number.MAX_SAFE_INTEGER, index: -1 });

    // 计算子元素的位置
    childFragment.inlineOffset = gap + shortestColumn.index * (childAvailableInlineSize + gap) + edges.inlineStart;
    childFragment.blockOffset = gap + shortestColumn.value;

    // 更新当前列的高度（原高度 + 子元素高度）
    columnHeightList[shortestColumn.index] = childFragment.blockOffset + childFragment.blockSize;

    // 更新容器高度（若最短列的高度没有超过容器原高度，则容器高度保持不变）
    autoBlockSize = Math.max(autoBlockSize, columnHeightList[shortestColumn.index] + gap);
}

与普通瀑布流唯一的不同可能是在最后一步，我们需要更新容器的高度，所以每布局一个子元素，都尝试记录目前最高那列的高度。

最后，我们需要固定返回一个包含容器高度和子元素 fragment 的对象

注：按照草案中的描述，此处应该返回一个FragmentResult对象，但是目前没有任何一个浏览器实现了这个类…

// 固定返回一个包含autoBlockSize和childFragments的对象
return { autoBlockSize, childFragments };

完整的代码可以在文章开头的仓库中找到。-

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。