用不同的形状无间隙地填充 div
Fill the div with different shapes without gaps
我正在尝试制作一个小部件，用较小的 div 填充 div（代表较小的内容，如图像、文本、链接等）。这个想法是所有 div 前面都有确定的大小，为了更容易理解，我将使用简单的单位。
例如上图中的形状是：
A = 2x1
B = 1x2
C = 1x1
小部件大小 = 2x10
假设我想提供各种新闻，我们所知道的是：
- 我们总能收到 10 条新闻
- 以及每个新闻的大小。
我的问题是，如果我有可用的形状，我想填补所有可能的空白。
我尝试简单地浮动元素来填充小部件，但这会让我留下空白。所以问题是如何解决这个问题，所以人们会用 A、B、C 的形状无间隙地填充小部件。
我大声使用 html/css/js/jquery 等基本的东西，没有插件。
假设我们有新闻示例：A、C、B、A、C
我只想得到方向，不需要完整的源代码 Ty
这是一种可能的方法：
https://jsfiddle.net/uyz9fhcr/
我没有做太多测试，我假设会有 spaces（取决于元素和列数）。
瓷砖位置一个接一个地处理，每个都放在第一个 space足够大的地方。
更改内容时，请确保调整 boxes 和 container 的 width 和 height。
我正在尝试制作一个小部件，用较小的 div 填充 div（代表较小的内容，如图像、文本、链接等）。这个想法是所有 div 前面都有确定的大小，为了更容易理解，我将使用简单的单位。
例如上图中的形状是：
A = 2x1
B = 1x2
C = 1x1
小部件大小 = 2x10
假设我想提供各种新闻，我们所知道的是：
- 我们总能收到 10 条新闻
- 以及每个新闻的大小。
我的问题是，如果我有可用的形状，我想填补所有可能的空白。
我尝试简单地浮动元素来填充小部件，但这会让我留下空白。所以问题是如何解决这个问题，所以人们会用 A、B、C 的形状无间隙地填充小部件。
我大声使用 html/css/js/jquery 等基本的东西，没有插件。
假设我们有新闻示例：A、C、B、A、C
我只想得到方向，不需要完整的源代码 Ty
这是一种可能的方法： https://jsfiddle.net/uyz9fhcr/
我没有做太多测试，我假设会有 spaces（取决于元素和列数）。
瓷砖位置一个接一个地处理，每个都放在第一个 space足够大的地方。
更改内容时，请确保调整 boxes 和 container 的 width 和 height。