通過 javascript 重新定位的元素之間的空白

Question

我正在用 javascript 創建一個圖像拼圖。 我在 2 行中創建 14 個 div 元素，然后向它們添加背景圖像，設置它們的位置和寬度等......它工作正常。 但是當我重新定位它們（隨機播放）時，會出現不需要的空白。 並非總是如此，不是每個圖像，也不是同一個地方。 我同時只更改兩個元素。

這是我的更改 function：

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 秒然后將它們隨機播放。 這里！
– BálintGá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不為 integer 像素。
所有這些都導致這些奇怪的背景線條在圖像之間閃爍。 因為瀏覽器的渲染引擎只能顯示由整數像素 position 和大小定義的“框”的圖像，所以瀏覽器通過四舍五入到最接近的像素來擬合圖像。
如果存在舍入誤差，則可能會發生彼此相鄰的圖像恰好被一個像素分開。 （它們也可以重疊一個像素，但這通常不會被注意到。）

請參閱調整大小時發生的此問題的視頻。

現在你知道為什么了，讓我們解決這個問題：
有很多方法可以解決這個問題，最好的辦法是在設置大小和偏移量（ 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 個垂直像素。 （我知道。太可怕了。）

看看固定代碼是如何工作的！