通过javascript重新定位的元素之间的空白

Question

我正在用 javascript 创建一个图像拼图。我在 2 行中创建 14 个 div 元素，然后向它们添加背景图像，设置它们的位置和宽度等......它工作正常。但是当我重新定位它们（​​随机播放）时，会出现不需要的空白。并非总是如此，不是每个图像，也不是同一个地方。 我同时只更改两个元素。

这是我的更改功能：

let original_pos = [];

// I choose two element randomly, and pushing the first element positions into the original_pos array
// and I pass the second element to the shuffle_elem() function
function shuffle() {
    let random_elem = document.querySelectorAll(".bg-elem");
    for(let i = 0; i <= 50; i++) {
    let random_num = Math.floor(Math.random() * random_elem.length);
    let random_num2 = Math.floor(Math.random() * random_elem.length);
    original_pos.push(random_elem[random_num].offsetTop);
    original_pos.push(random_elem[random_num].offsetLeft);
    cserel_elem(random_elem[random_num],random_elem[random_num2]);
}

// Here are the positions change
function shuffle_elem(elem1, elem2) {
    elem1.style.left = elem2.offsetLeft+'px';
    elem1.style.top = elem2.offsetTop+'px';
    elem2.style.top = original_pos[0]+'px';
    elem2.style.left  = original_pos[1]+'px';
    original_pos = [];
}

一切正常，所以我可以更改这两个元素，但会有一点空白。在这张图片中，您可以在两个相邻的元素中看到它，但有时根本没有空白，或者只有一个元素有或几乎每个元素......完全随机。

只有 1 个像素，但它在那里，非常令人沮丧。请帮我找出这个像素隐藏在哪里。 请不要使用 jQuery

一些附加信息（CSS）：

// the main holder div where my elements are
.PlayGround {
    position: relative;
    overflow: hidden;
}
// one element
.bg-elem {
    position: absolute;
    margin: 0;
    padding: 0;
}

Answer 1

通过您提供的链接，我能够重现该问题，检查您的代码并找到一两个修复方法。

是的，你可以看到 javascript 定位的原始元素，然后我等待 1.5 秒然后随机播放它们。 Here!
– Bálint Gácsfalvy
_{^{用于文档目的的评论引用。}}

问题很简单：
您的图像可能大小相同，但它们并未四舍五入到完整像素，如代码所示：

// ratio is already already not an integers
let new_width = imgwidth * ratio;
let new_height = imgheight * ratio;
// and then some lines later you do divide by 7 and 2.
element[i].style.width = new_width/7+'px';
element[i].style.height = new_height/2+'px';

除此之外，您还将left 和top 设置为不为整数像素。
所有这些都导致这些奇怪的背景线条在图像之间闪烁。因为浏览器的渲染引擎只能显示由整数像素位置和大小定义的“框”的图像，所以浏览器通过四舍五入到最接近的像素来适应图像。
如果存在舍入误差，则可能会发生彼此相邻的图像恰好被一个像素分开。 （它们也可以重叠一个像素，但这通常不会被注意到。）

See video of this issue happening on resize.

现在你知道原因了，让我们解决这个问题：
有很多方法可以解决这个问题，最好是在设置大小和偏移量（left 和top）时自己进行四舍五入，而不是依赖渲染引擎的四舍五入。但这是更耗时的事情，我相信如果你想这样做，你会自己弄清楚。

我选择在这里向您展示的快速而肮脏的方法是在使用之前将 new_width 和 new_height 值除以整数，然后再使用它们。这非常简单，只需这样做：

let new_width = Math.floor(imgwidth * ratio / 7) * 7;
let new_height = Math.floor(imgheight * ratio / 2) * 2;

而不是这个：

let new_width = imgwidth * ratio;
let new_height = imgheight * ratio;

此修复的缺点：您最多会丢失 6 个水平像素和 1 个垂直像素。 （我知道。很糟糕。）

看看固定代码是如何工作的here！