研究了下Houdini中的CSS Layout API

lu92649264發表於2020-12-14
CSSAPI

一、基本概念和一些屬性API

CSS Layout API可以讓開發者自定義佈局方式，例如實現瀑布流佈局效果，全新的表格佈局效果等。

CSS Layout API的使用分為兩部分。

第1部分是在CSS中設定自定義的佈局名稱，和Flex佈局、Grid佈局一樣，也是使用display屬性，區別在於CSS Layout API自定義的佈局使用layout()函式表示。

例如自定義一個瀑布流佈局名為'masonry'，則在CSS中使用的語法就會是下面這樣：

.container {
    display: layout(masonry);
}

第2部分是使用JavaScript書寫關於如何佈局的功能模組。CSS Layout API已經約定好了佈局模組書寫的語法，如果單看規範文件，會覺得像天書一樣，無從下手，實際上，自定義佈局的程式碼書寫是有固定的套路的，也就是大體的JavaScript程式碼框架都是固定的，只需要在指定的函式位置書寫對容器元素以及容器子元素的位置和尺寸進行設定的程式碼就可以實現想要的效果了。

舉個例子，要自定義一個瀑布流佈局效果，JavaScript部分的程式碼該如何書寫呢？

首先在頁面中需要呼叫關於瀑布流佈局的模組，可以使用layoutWorklet，具體程式碼如下所示：

if ('layoutWorklet' in CSS) {
    // 把自定義的瀑布流佈局指令碼添

相關文章