javascript - 以編程方式計算元素之間的填充

Question

我想要做的是將3個元素（可能是4/5/6，需要動態）垂直放置在容器中的位置：絕對位置。我知道這可以用一些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'; 
} 

而且它的工作原理有點，但有很多額外的空間在t的底部他的容器，所以它不是晚上間隔。

有人可以幫我嗎？

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>