围绕正方形动态排列div，并在正方形边结束后旋转它们

类似于在此处输入链接描述。

现在我面临的这个问题显示在下面的jsfiddle中：http://jsfiddle.net/rkqBD/2/

中间的方形div表示餐厅的桌子，桌子上的客人围绕着桌子。Div现在是按圆形桌子上的顺序排列的，但我需要将它们面向正方形/桌子。问题是餐桌上的客人数量是动态变化的。。我如何定位它们，使每个客人椅子的图像都面向桌子？这是我迄今为止的代码：

$( document ).ready(function(){
$('.circleBase').each(function(){
var d = $(this).attr("id");
var tbltype = $(this).attr("tbltype");
if(tbltype==="1"){
border = "1";
}else { border = "999";}
var elems='';
var x = 0, y = 0, angle = 0;
var rot = 0;
if(tbltype==="1"){
var elems = document.getElementsByClassName('info_container22 square');
var totContent = $(this).find(elems).size();
var increase = Math.PI * 2 / totContent;
for (var i = 0; i < totContent; i++) {
var elem = elems[i];
x = (120 * Math.cos(angle) + 40);
y = (115 * Math.sin(angle) + 60);
elem.style.position = 'absolute';
elem.style.left = x + 'px';
elem.style.top = y + 'px';
var rot = 88 + (i * (360 / totContent));
var img = $(elems[i]).find('.img');
img.css('-moz-transform', "rotate("+rot+"deg)");
img.css.MozTransform = "rotate("+rot+"deg)";
img.css('-webkit-transform', "rotate("+rot+"deg)");
img.css('-o-transform', "rotate("+rot+"deg)");
img.css('-ms-transform', "rotate("+rot+"deg)");
img.css('zIndex', "10");
angle += increase;
}
}
}); 
});

好消息是使用方表会更容易，但您需要一种不同的算法：

行：x=(120*Math.cos(角度)+40)；y=(115*Math.sin(角度)+60)；和var rot=88+(i*(360/totContent))；

应该更改。另外，你不应该有角度+=增加；因为它将以另一种方式计算

更详细地说：

你有一个正方形的桌子，所以你会有4个不同的旋转角度0,90180270左，下，右，顶面其次，让"side_num"是一个变量，有多少人坐在的一边

当我们循环通过"guests"时，数组"j"与"i"一样增加1，直到达到"side_num"，如果"j"变为0，角度以及x、y-s也发生了变化。

现在计算一个人坐在哪一边：(j mod‘side_num’)(因为我们有表的4面)

x和y也应该基于(j mod‘side_num’)进行计算，因此左侧将具有相同的x值等。

我会更正代码，但这是背后的理论

http://jsfiddle.net/Krisztian123/hyGrj/32/几乎完成：

$( document ).ready(function(){
$('.circleBase').each(function(){
var d = $(this).attr("id");
var tbltype = $(this).attr("tbltype");
if(tbltype==="1"){
border = "1";
}else { border = "999";}
var elems='';
var x = 0, y = 0, angle = 0;
var rot = 0;
if(tbltype==="1"){
var elems = document.getElementsByClassName('info_container22 square');
//alert(elems.length);
var side_num = 4; //how many seats per side
//   side_num -= 1; //technically it should be 3 
var j = 0;
var angles=['270','180','270','90'];
var xs=[0,38,0,0];
var ys=[38,0,0,0];
var x_fix=[-50,0,0,0]
var y_fix=[-30,130,0,0]
var cur_side = 0; //(0,1,2,3 == left, bottom,right,top)
var totContent = $(this).find(elems).size();
var j = -1; //to be equal to loop index
for (var i = 0; i < totContent; i++) {
var elem = elems[i];
j++; // like (0,1,2,3,4,0,1,2...)
if (j == side_num) {
//next side
j = 0;
cur_side++;
if (cur_side == 4) {
alert("places are full next table");
}
}
x = x_fix[cur_side] + j*xs[cur_side];
y = y_fix[cur_side] + j*ys[cur_side];
elem.style.position = 'absolute';
elem.style.left = x + 'px';
elem.style.top = y + 'px';
var rot = angles[cur_side];
var img = $(elems[i]).find('.img');
img.css('-moz-transform', "rotate("+rot+"deg)");
img.css.MozTransform = "rotate("+rot+"deg)";
img.css('-webkit-transform', "rotate("+rot+"deg)");
img.css('-o-transform', "rotate("+rot+"deg)");
img.css('-ms-transform', "rotate("+rot+"deg)");
img.css('zIndex', "10");
}
}
});
});

我会这样做：

如果椅子数量不均匀(number_of_chairs%number_of_table_sides)，则预留一把额外的椅子
将其余的椅子除以桌子侧面的数量
对于每张桌子，椅子的数量是2的结果。
将当前桌边的边框长度除以椅子数量
放置椅子时，应根据边界长度进行偏移。
椅子的旋转是360/桌子侧面的编号*current_side
如果有一把额外的椅子，因为椅子的数量是奇数，把它放在某个地方。也许把它加到桌子的最后一边，让那一边的椅子靠得更近一点。

希望能有所帮助。你在写扑克游戏吗？

这可以使用flexbox以一种相当简单的方式完成。它甚至会做出响应，椅子会在浏览器或容器调整大小时重新计算它们的位置。当然，唯一的缺点是浏览器支持率还不是100%。但我想我无论如何都会发布这个想法，因为它在未来可能会有用。

在HTML中，你只需要写一个正常的名称列表：

<ul class="names">
<li>John</li>
<li>Jordan</li>
<li>Vania</li>
<li>Martin</li>
<li>Tony</li>
<li>Ivan</li>
<li>Maria</li>
<li>Edward</li>
<li>Edward</li>
</ul>

然后javascript会在某个地方创建这个标记(它可以放在任何地方)：

<div class="table-container">
<div class="table"></div>
<div class="t"></div>
<div class="r"></div>
<div class="b"></div>
<div class="l"></div>
</div>

注意：这里的所有元素都将其box-sizing的CSS属性设置为border-box

.table-containerdiv只是.table和其他元素的容器。它没有固定的宽度(所以它很灵敏)，但它有一个固定的高度。此高度由javascript确定，并基于椅子的尺寸。例如，如果你说一把椅子是40px高，并且你希望桌子是3高，那么.table-containerdiv的高度将是40px*5(40px*3)+(40px*2(用于填充桌子周围的椅子))。

.tablediv只是一个常规div，它只设置了height: 100%;的CSS属性。这是因为.table-container已经有了正确的填充，所以.table的内容区域也已经是正确的大小。

代表上、右、下、左的.t、.r、.b和.ldivs相对于.table-containerdivs是绝对定位的divs。这些divs有效地固定了一排排椅子。这些div中的每一个都将其justify-content和align-contentCSS属性设置为space-around。这意味着，每当你向它们添加新元素时，它们都会自动且正确地隔开，所以看起来会很好看。不需要任何算法。

因此，现在所要做的就是用javascript创建这些元素，获取名称列表，然后将每个名称附加到正确的div(顶部、右侧、底部或左侧)。我只是按顺时针方向一个接一个地循环浏览这些名字。

粗略示例：http://jsbin.com/oFIXOZUf/2/edit.

相关内容

最新更新

热门标签：