时间戳

首页 > 解决方案 > 在容器中以相等的距离放置绝对位置元素

javascript - 在容器中以相等的距离放置绝对位置元素

问题描述

我正在创建一个可排序的拖放片段，用户可以根据需要对网格项目进行排序和重新排序。我正在放置具有绝对位置的项目以使动画正确。

基本上，我有一个容器，一行中会有 n 个元素，我需要将这些项目放置在彼此相等的距离处。 在此处输入图像描述

我需要找到一种可靠的方法来计算每个元素的左值，以便正确放置它。

以下是我当前的代码：

let rowElemsCount= 4;

const arrangeItems = (items,rowElemsCount,container,elemWidth,elemHight) => {
    elemHight= elemHight|| elemWidth;
    let containerWidth = container.offsetWidth;
    let containerHeight = Math.ceil(items.length / rowElemsCount) * elemHight;
    container.style.height =  containerHeight + "px";
    items.forEach((item,i)=>{
        let pos = {
            x: (i%rowElemsCount) * elemWidth+ "px",
            y: Math.floor(i/rowElemsCount) * elemHight+ "px"
        };

        item.style.cssText = "top:"+pos.y+";left:"+pos.x+";"
        item.dataset.index = i;
    });
}

我使用这种方法来组织元素，顶部的计算是完美的，但对于左侧，它只是将元素一个接一个地放置。我需要以某种方式复制 justify-content: space-between 。

标签： javascript

解决方案

您忘记在计算中计算元素之间的空白。如果您将所有子容器的宽度相加，然后从父容器的宽度中减去它，您将得到剩余的空格，您需要将其分成分数。

parent width - children total width = leftover whitespace

如果空白仅被划分为子元素之间的部分，则应将剩余的空白除以子元素计数-1，因为第一个元素不需要填充

leftover whitespace / ( children - 1 ) = space between

现在你的左边就是剩下的白色加上左边的值

item index * ( element width + white space )

现在它们应该正确间隔。您与当前代码非常接近，实现这些更改应该很容易！

推荐阅读