用不同的形状填充div，没有间隙

Question

我正在尝试制作一个小部件，它将用较小的div（代表较小的内容，如图像，文本，链接等）填充div。 想法是所有div都具有预先决定的大小，为了更容易理解，我将使用简单的单位。

例如，上图的形状为：
A = 2x1
B = 1x2
C = 1x1
小部件尺寸= 2x10

可以说我想提供各种新闻，我们所知道的是：
-我们总是得到10条新闻
-以及每个新闻的大小。

我的问题是，如果我有可用的形状，我想填补所有可能的空白。
我只是尝试将剩余的浮动元素填充到小部件中，但这会给我留下空白。 因此，问题是如何解决这一问题，因此将小部件填充为A，B，C的形状而没有间隙。
我大声使用html / css / js / jquery之类的基本内容，没有插件。

假设我们有新闻示例：A，C，B，A，C

我只想得到方向，不需要完整的源代码Ty

Answer 1

这是一种可能的方法： https : //jsfiddle.net/uyz9fhcr/

我没有做太多测试，并且我假设会有空格（取决于元素和列数）。

磁贴位置逐个处理，每个都放置在足够容纳它的第一个空间中。

更换东西时，请确保调整boxes和container的width和height 。