使用JavaScript

Question

我有一个对象列表，我在模板中用

打印

each object in objects
  <div class="col-md-4">..</div>

我使用Bootstrap，因此col-md-4意味着div元素占据空间的1/3。

但我希望col-md-4中的4是随机的。但是我想要这样，1,2或3个元素占据整行（应该总和为12）。

所以我希望它是

  <div class="col-md-4">..</div>
  <div class="col-md-4">..</div>
  <div class="col-md-4">..</div>

或

  <div class="col-md-8">..</div>
  <div class="col-md-4">..</div>

或

  <div class="col-md-4">..</div>
  <div class="col-md-8">..</div>

或

  <div class="col-md-6">..</div>
  <div class="col-md-6">..</div>

或

  <div class="col-md-12">..</div>

这几乎是大多数在线报纸的样子。但我不知道如何平衡它。

我想我应该拿整个数组objects并随机选择要创建的行数。如果我有15个元素，我最多可以做15行（每个都有col-md-12），我必须至少做15/3 = 5行，所以行数应该介于两者之间。然后我需要为每一行确定它应该有多少列，然后平衡每个对象的宽度，使特定行中的元素总和为12。

我该怎么做？此外，在大多数报纸网站上，似乎不同文章的大小并不是完全随机的（就像我的剧本一样），那么它们如何具有随机大小，尽管它们不经常变化？我想我可以通过使用对象的创建时间或其他东西来确定它们的大小？

更具体地说，我不必将列封装在行中。我只需要确保后续对象总和为12。

因此，如果我有5个对象，则需要使用

进行打印

col-md-12
col-md-4
col-md-4
col-md-4
col-md-12

或

col-md-8
col-md-4
col-md-4
col-md-4
col-md-4

所以我觉得它足够了：

• 对于第一个对象，请选择随机宽度
• 对于所有后续对象，确定是否可以使用多于1个额外列填充宽度 - 并随机选择填充行或选择宽度以使另一列适合

因此，我需要一个始终存储3个最后打印对象宽度的变量（如果它们总和为12，我知道我将要创建一个新行。）