用不同的形状填充不同形状的div

I'm trying to make a widget that would fill the div with smaller divs(which represent smaller content like images, text, links etc etc). The idea is that all the divs have in front decided sizes, for easier understanding i'll use simple units.

For example shapes from above image are:
A = 2x1
B = 1x2
C = 1x1
Widget-size = 2x10

我正在尝试制作一个小部件,用较小的div(代表较小的内容,如图像,文本,链接等)填充div。这个想法是所有的div都有前面决定的大小,为了更容易理解我会使用简单的单位。例如,上图中的形状为:A = 2x1 B = 1x2 C = 1x1 Widget-size = 2x10

Lets say i would like to feed in all kind of news, and all we know is:
- that we always get 10 news
- and the size of each news.

My problem is that I would like to fill every possible gap if I have available shape.
I tried simply floating elements left to fill in the widget, but that would leave me with gaps. So the question is how to approach this, so one would fill the widget with shapes of A, B, C without gaps.
I'm aloud to use basic stuff like html/css/js/jquery, no plugins.

让我们说我想提供所有类型的新闻,我们所知道的是: - 我们总是得到10条新闻 - 以及每条新闻的大小。我的问题是,如果我有可用的形状,我想填补所有可能的空白。我试着简单地浮动元素来填充小部件,但这会让我留下空白。所以问题是如何处理这个问题,因此可以在没有间隙的情况下用A,B,C的形状填充小部件。我大声使用基本的东西,如html / css / js / jquery,没有插件。

Lets say we have example of news: A, C, B, A, C

让我们说我们有新闻的例子:A,C,B,A,C

I would only like to get direction, no need of full source code Ty

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

1 个解决方案

#1

Here is one possible approach: https://jsfiddle.net/uyz9fhcr/

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

I didn't do much testing and I assume there will be spaces (depending on the elements and number of columns).

我没有做太多测试,我认为会有空格(取决于元素和列数)。

The tile positions are processed one after another, each being placed in the first space big enough to contain it.

平铺位置被一个接一个地处理,每个位置被放置在足够容纳它的第一空间中。

When changing stuff make sure to adjust the width and height of the boxes and container.

更换东西时,请务必调整盒子和容器的宽度和高度。