Question

这更像是在＃34;这是否可能没有愚蠢的代码？＆＃34;并获得如何去做的一些想法。如果我有一张餐桌的css表示，并希望在它周围放置4-10把椅子，我可能会创建这样的div（内联以显示我正在做的紧凑）

<div style="position:relative;width:200px;height:200px;">
<div id="table" style="position:absolute;width:100px;height:100px;">&nbsp;</div>
<div id="chair1" style="position:absolute;width:10px;height:10px;">&nbsp;    </div>
<div id="chair2" style="position:absolute;width:10px;height:10px;">&nbsp;    </div>
<div id="chair3" style="position:absolute;width:10px;height:10px;">&nbsp;</div>
<div id="chair4" style="position:absolute;width:10px;height:10px;">&nbsp;</div>
</div>

哪里有一个div来举行全部，一个div代表4把椅子和一张桌子。但是，如果我动态创建的代码需要创建6个，8个或10个主席呢？如何在桌子周围以均匀的速度将它们动态地从桌子上移开？想法？

Answer 1

您需要JavaScript才能设置主席。让你入门的东西：

HTML：

<div id="room">
  <div id="table"></div>
</div>

CSS：

#room {
  position:relative;
  width:200px;
  height:200px;
}
#table {
  background:blue;
  position:absolute;
  width:100%;
  height:100%;
}
.chair {
  background:red;
  position:absolute;
  width:10px;
  height:10px;
}

使用jQuery的JavaScript：

var $chair = $('<div class="chair">');
var $room = $('#room');
var top = 0;
var left = 0;
var stepSize = 20;

var createChairs = function(amount) {
  for (var i = 0; i < amount; i++) {
     var newChair = $chair.clone();
     newChair.css({top: top, left: left});
     $room.append(newChair);
     left = left + stepSize;
  }
}

createChairs(10);

你创建了一个功能，你传递了你想要的椅子数量，然后你绕过边界并设置尽可能多的椅子。这个例子不包括边界处理，即它只是从左上角到右上角设置椅子。但是在一些条件下处理边界应该很容易。你应该已经有了这个想法。

小提琴：https://jsfiddle.net/s0oady2q/

Answer 2

我真的不知道如果没有至少一点点JavaScript就可以做到这一点。事实上，即使你试图使用某种calc()魔法，你仍然会遇到calc()不支持sin()或cos()来电的问题

这是一种小而纯粹的JavaScript方式，可以获得您想要的内容：

＆＃13;

/*jslint browser:true*/

(function(doc) {
  "use strict";

  var TABLE_RADIUS = 100;

  function each(arr, cb) {
    return Array.prototype.forEach.call(arr, cb);
  }

  function deg2rad(deg) {
    return ((deg * Math.PI) / 180);
  }

  function pos(deg, r) {
    return {
      x: (r * (Math.cos(deg2rad(deg)))),
      y: (r * (Math.sin(deg2rad(deg))))
    };
  }

  function chairIterator(chair, chairIndex, chairArr) {
    var circPos = pos(chairIndex / chairArr.length * 360, TABLE_RADIUS);
    chair.style.top = circPos.y + "px";
    chair.style.left = circPos.x + "px";
  }

  function tableIterator(table) {
    var chairs = table.querySelectorAll(".chair");
    each(chairs, chairIterator);
  }

  function main() {
    var tables = document.querySelectorAll(".table");
    each(tables, tableIterator);
  }

  doc.addEventListener("DOMContentLoaded", main);
}(document));

＆＃13;

.table {
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 50%;
  background-color: red;
}
.table .chair {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: blue;
}

＆＃13;

<div class="table">
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
  <div class="chair"></div>
</div>

＆＃13;

计算围绕另一个div的小div的CSS定位？

2 个答案: