分配多个元素随机大小和随机放置，同时遵循顺序 div 顺序答案

【问题标题】：Assign multiple elements random size and random placement, while following the sequential div order分配多个元素随机大小和随机放置，同时遵循顺序 div 顺序
【发布时间】：2014-05-03 20:10:07
【问题描述】：

试图找出某种逻辑，让我按顺序分配元素。应在给定范围内随机生成什么大小和位置（例如，元素必须在视口内，并且元素的大小应在定义的范围内，例如视口的最小 10%，最大 60%）。

我不确定处理此类事情的最佳方法是什么，有什么想法吗？
我在下面附上了它可能的样子的草图。每次加载时布局会有所不同。

标记

<div class="container">
   <div class="post">Post 1</div>
   <div class="post">Post 2</div>
   <div class="post">Post 3</div>
   <div class="post">Post 4</div>
   <div class="post">Post 5</div>
   <div class="post">Post 6</div>
   <div class="post">Post 7</div>
   <div class="post">Post 8</div>
   <div class="post">Post 9</div>
   <div class="post">Post 10</div>
   <div class="post">Post 11</div>
   <div class="post">Post 12</div>
   <div class="post">Post 13</div>
   <div class="post">Post 14</div>
   <div class="post">Post 15</div>
</div>

【问题讨论】：

您的意思是chronological 订单吗？如果是这样，那么您希望时间如何考虑 div 的显示方式？
@LanceRoberts 哦，哇，没有发现那个拼写错误，谢谢！在这种情况下按时间顺序排列，我的意思是虽然定位应该是随机的，但顺序应该遵循 DOM，以便首先显示 DOM 中最顶部的元素，然后再显示其他元素。
好的，那么它可能有一个更好的名字。可能是“Sequential Div Ordering”中的“Random Placement”或类似的东西。
@LanceRoberts 谢谢，我已经更新了标题和描述，希望更清楚一点。

标签： javascript random position size logic

【解决方案1】：

谢谢，编写代码很有趣。我在 CSS 中设置了一些默认值，然后在 JS 中执行了逻辑。请注意，buffer() 函数是非线性的；我们希望大多数缓冲区接近于零，并且很少有缓冲区位于较大的一侧，因此我们使用e（2.7⁰/12 = 0.08em 到 2.7⁶/12 = 33.62em）的幂缩放，然后将它们相乘以获得更大范围的数字（而不是 2 的幂除以 12）。

我假设元素已经按时间顺序排列。如果没有，那应该不难做到，只需对帖子[] 进行排序并在容器上使用appendChild() 按顺序插入它们。

var defaultMax = Math.exp(6) / 12;  // e⁶ / 12 = 33.5em

// random buffer to give for spacing.
// growth is inverse exponential, so larger is less likely
function buffer(min=0.1, max=defaultMax, mult=1) {
  return Math.min(max, Math.max(min,
    min / 2 + Math.exp(Math.random() * 6) * Math.random() * mult / 12
  ))+"em";
}
function randomize() {
  var posts = document.getElementsByClassName("posts");
  for (var p = 0; p < posts.length; p++) {
    // random buffered margins, ordered: top right bottom left.
    // top is at least 0.1em, right and bottom are at least 0.25em.
    // top and bottom are cut in half to limit lost vertical space.
    posts[p].style.margin = buffer(0.1,  defaultMax, 0.5) + " "
                          + buffer(0.25) + " "
                          + buffer(0.25, defaultMax, 0.5) + " "
                          + buffer();
    // random width and height (with sane minimum size: 8em x 5em)
    posts[p].style.width = buffer(8);
    posts[p].style.height = buffer(5);
  }
}

.posts     { float:left; background:#000; color:#fff;
             padding:0.2em; text-align:center; }
.container { width:50em; max-width:100%; }

<body onload="randomize()">
  <div class="container">
    <div class="posts">Post 1</div>
    <div class="posts">Post 2</div>
    <div class="posts">Post 3</div>
    <div class="posts">Post 4</div>
    <div class="posts">Post 5</div>
    <div class="posts">Post 6</div>
    <div class="posts">Post 7</div>
    <div class="posts">Post 8</div>
    <div class="posts">Post 9</div>
    <div class="posts">Post 10</div>
    <div class="posts">Post 11</div>
    <div class="posts">Post 12</div>
    <div class="posts">Post 13</div>
    <div class="posts">Post 14</div>
    <div class="posts">Post 15</div>
  </div>
</body>

【讨论】：

不错！然而，我想知道如何设置最小值和最大值，例如它不能小于 10% 并且不能大于 50%（百分比，因为它可以扩展）。
@INT：我修改了代码以使用em 而不是像素，这使得它更容易缩放，但如果你想要百分比，我需要知道它是相对的。默认情况下，CSS 百分比将相对于父元素，但我不确定你是否想要这样。当前代码已说明最小尺寸（当前为 4em x 4em）和由 buffer() 规定的最大尺寸（当前为 33.6em）。
@INT：我不确定你为什么不接受这个答案。问题中没有要求百分比，我也在一定程度上回答了这个问题（你没有回答我的后续问题。如果它们只是原始百分比，你可以自己做。如果他们是相对于另一个元素，那么您可能需要window.innerWidth 或getComputedStyle(elem).width。我可以帮助您进一步完善它，但在我做更多之前，赏金可能会用完。

【解决方案2】：

所以我使用 Adams 代码作为基础。所以 HTML 和 CSS 保持不变：

HTML

<body onload="randomize()">
  <div class="container">
    <div class="posts">Post 1</div>
    <div class="posts">Post 2</div>
    <div class="posts">Post 3</div>
    <div class="posts">Post 4</div>
    <div class="posts">Post 5</div>
    <div class="posts">Post 6</div>
    <div class="posts">Post 7</div>
    <div class="posts">Post 8</div>
    <div class="posts">Post 9</div>
    <div class="posts">Post 10</div>
    <div class="posts">Post 11</div>
    <div class="posts">Post 12</div>
    <div class="posts">Post 13</div>
    <div class="posts">Post 14</div>
    <div class="posts">Post 15</div>
  </div>
</body>

CSS：

.posts { float:left; background:#000; color:#fff; padding:0.2em; text-align:center; }
.container { width:50em; max-width:100%; }

JavaScript

但是会改变。更新 options 变量中的任何属性以更改布局。

var options = {
    width: {
        min: 10,
        max: 60,
        unit: '%'
    },
    height: {
        min: 10,
        max: 30,
        unit: '%'
    },
    margin: {
        min: 5,
        max: 10,
        unit: 'px'
    }

}


function getRandomInt (min, max, unit) {
    return Math.floor(Math.random() * (max - min + 1)) + min + unit;
}
function randomize() {
  var posts = document.getElementsByClassName("posts");
  for (var p = 0; p < posts.length; p++) {
    posts[p].style.margin =  getRandomInt(options.margin.min,options.margin.max, options.margin.unit) + " " + getRandomInt(options.margin.min,options.margin.max, options.margin.unit);
    posts[p].style.width = getRandomInt(options.width.min,options.width.max, options.width.unit);
    posts[p].style.height = getRandomInt(options.height.min,options.height.max, options.height.unit);
  }
}

我创建了一个小提琴：http://jsfiddle.net/qsUw7/

【讨论】：