在HTML中获取Flex Tile Container的功能

Question

Flex图块容器将在数据更改时创建和删除图块，并且在内容为动态的区域中使用效果似乎很好。如何在HTML中实现此功能？我想我们需要使用一些JS和/或CSS。有什么输入吗？

Answer 1

你可以完全忽略CSS（用于布局），并以与flex实现它相同的方式执行此操作。不提供代码本身，这是基本的想法（假设水平布局）：

1. 添加子项时，请将其添加到上一个兄弟的右侧。 （c.y = s.y+s.width）。
2. 检查当前孩子是否超过父母的宽度。 （c.y + c.width > p.width）。如果是这样，请将其放到下一个“行”。

当然，根据您是想要TileContainer还是FlowContainer，事情变得更加复杂。布局应该看起来像网格，还是像段落包装一样更有机？ （如果你想要它的所有段落包装，我认为让所有东西“漂浮：左”将为你做，但如果我错了，请纠正我。）假设TileContainer的想法，您只需要遍历所有子项并确保它们具有相同的高度/宽度（==最大子高度，最大子宽度），然后执行上面提到的布局步骤。您可能希望将每个子项放在容器div中，以便更轻松地控制不能很好地调整大小的元素。

最后，请确保您监听任何窗口调整大小事件，以便运行布局算法。

如果您需要提示，请查看Flex中“TileBase.as”中的算法，但是自己滚动可能更容易。