使用纯JS计算布局

Question

我可以有一个对象来表示带有样式的页面元素：

[{
   id: "widget-1",
   display: "block",
   float: "left",
   width: 100
}, {
   id: "widget-2",
   display: "block",
   float: "right",
   width: 200
}]

如何通过这些算法http://taligarsiel.com/Projects/howbrowserswork1.htm#layout在不使用浏览器DOM的情况下计算这些元素位置的坐标和大小？这样我就可以看到类似如下的结果：

[{
   "id": "widget-1",
   "width": 200,
   "height": 20,
   "top": 0,
   "left": 0,
   "right": 200,
   "bottom": 0,
}, {
   "id": "widget-2",
   "width": 200,
   "height": 20,
   "top": 0,
   "left": 200,
   "right": 0,
   "bottom": 0,
}]

有没有这样的库？我需要在浏览器中快速计算这一点，所以javascript实现将是有用的。

我看到我们有https://github.com/facebook/css-layout，但只支持"flex-box“布局。

Answer 1

虽然您希望从头开始构建CSS Box Model，但它是"quiet simple“。即使是本系列中this entry point也可能会有所帮助