javascript - 将随机生成的绝对 div 定位为网格的最佳方法？

Question

所以，我有一个应用程序可以生成随机数的 div，这些 div 总是绝对定位的。不，由于应用程序中的其他因素，我无法将它们关联起来。

有没有办法在 CSS 或 JQuery 中使这些绝对定位的 div 网格化？所以像这样:

     X X X
     X X X
     X X X
     etc...

到目前为止，它们是这样的:

     X
     X
     X
     etc...

我不知道每个查询中会有多少个 div；可能是 5 岁，可能是 80 岁，可能是 17 岁，等等。

Answer 1

如果你知道容器的宽度，你可以使用这个代码:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<style type="text/css">
.x {
  position: absolute;
}
</style>

<div id="container">
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
  <div class="x">x</div>
</div>

<script>
$(document).ready(function() {
  var offset = 10;
  var offsetTop = 10;
  var _width = $("#container").width();
  console.log(_width);

  $('.x').each(function(e, item) {
    console.log($(item));
    $(item).offset({
      top: offsetTop,
      left: offset
    });
    offset += 20;

    if (offset >= _width) {
      offsetTop += 30;
      offset = 10;
    }
  })
})
</script>