Question

我尝试做的是将3个元素（可能是4/5/6，需要是动态的）垂直放置在容器内的position：absolute。我知道这可以通过一些CSS来实现，但不幸的是我必须在JavaScript中这样做，所以我需要一个能够计算容器+子高度的函数/算法，然后均匀地定位它们。

所以这是一个测试用例：

<div id="element_1" style="position:relative;display:block;width:400px;height:768px">
    <div id="child_1" style="position:absolute;display:block;width:400px;height:105px"></div>
    <div id="child_2" style="position:absolute;display:block;width:400px;height:105px"></div>
    <div id="child_3" style="position:absolute;display:block;width:400px;height:105px"></div>
</div>

有3个孩子，每个孩子的身高高达105px（孩子们的身高总是相同的，所以我坚持使用的JavaScript需要将这3个元素均匀地放置在垂直相同的填充处。

我尝试过类似的事情：

var container; // dom instance of element_1
var children = []; // contains dom instances of each of the children (child_1, child_2, etc)

var container_height = container.getBoundingClientRect().height; // container is css3 scalable, hence the rect
var children_height = children[0].getBoundingClientRect().height; // for example
var padding = (container_height - (children_height*layers.length)) / layers.length;

for(var i=0;i<children.length;i++){
    children[i].style.top = (padding*(i+1) + (i*children_height)) + 'px';
}

它有点工作，但容器底部有很多额外的空间，所以它不会间隔晚上。

有人能帮助我吗？

Answer 1

实际上，您在代码中错过了layer。虽然我只是在猜测layer未定义，但我的代码中是spaces，对吧？

我的代码中的

spaces指的是容器和子容器之间的空间。因为你说容器和第一个和最后一个div之间必须有“填充”，所以计数总是为子数+1。

function distribute() {
  const container = document.getElementById('element_1');
  const containerHeight = container.getBoundingClientRect().height;
  const children = container.querySelectorAll('div');
  const childHeight = children[0].getBoundingClientRect().height;
  const spaces = children.length + 1;
  const spaceInPx = (containerHeight - (childHeight * children.length)) / spaces;
  
  children.forEach((child, i) => {
    const position = spaceInPx * (i + 1) + (childHeight * i);
    
    child.style.top = `${position}px`;
  });
}

distribute();

#element_1 {
  background: #000;
}

#element_1 div {
  background: #666;
}

<div id="element_1" style="position:relative;display:block;width:400px;height:768px">
  <div id="child_1" style="position:absolute;display:block;width:400px;height:105px"></div>
  <div id="child_2" style="position:absolute;display:block;width:400px;height:105px"></div>
  <div id="child_3" style="position:absolute;display:block;width:400px;height:105px"></div>
</div>

javascript - 以编程方式计算元素之间的填充

1 个答案: