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

我正在用javascript创建一个图像拼图。我在2行中创建了14个div元素，然后我向它们添加了反RGOUND图像，设置了它们的位置和宽度等。。。它工作得很好。但当我重新定位它们（洗牌）时，会出现不需要的空白。不总是，不是每一张图片，也不是同一个地方。 我同时只改变两个元素

这是我的更改功能：

让原始位置=[]；
//我随机选择两个元素，并将第一个元素的位置推入原始的_pos数组
//我将第二个元素传递给shuffle_elem（）函数
函数shuffle（）{
让random_elem=document.queryselectoral（“.bg elem”）；
对于（假设i=0；i，如果我能够重现问题，请检查您的代码并找到一两个修复

是的，您可以看到javascript定位的原始元素，然后我等待1.5秒，然后洗牌它们。

–Bálint Gácsfalvy

注释报价用于文档编制

问题相当简单：

您的图像可能大小相同，但它们没有四舍五入到完整像素，如代码所示：

//比率已不是整数
设新宽度=imgwidth*比值；
设新高度=imghight*比值；
//然后几行，再除以7和2。
元素[i].style.width=new_width/7+'px'；
元素[i].style.height=new_height/2+'px'；

除此之外，您还将
left
和
top
设置为非整数像素。

所有这些都会导致图像之间出现奇怪的背景线。由于浏览器的渲染引擎只能显示由整数像素位置和大小定义的“框”的图像，因此浏览器通过舍入到最近的像素来匹配图像。

如果存在舍入误差，可能会发生这样的情况，即相邻的图像之间仅间隔一个像素（它们也可能重叠一个像素，但通常不会被注意到）



现在您知道为什么了，让我们来解决这个问题：

有很多方法可以解决这个问题，最好是在设置大小和偏移量（
left
和
top
）时自己将整像素取整，而不依赖于渲染引擎的取整。但是这需要花费更多的时间，如果你想这样做，我相信你会自己解决的

在这里，我选择了一种快速而肮脏的方式向您展示，即在使用前将
new_width
和
new_height
值除以整数的个数。这非常简单，只需执行以下操作：

let new_width=Math.floor（imgwidth*比值/7）*7；
让新高度=数学楼层（高度*比率/2）*2；

与此相反：

new_width=imgwidth*比值；
设新高度=imghight*比值；

这个修正的缺点是：你的水平方向最多有6个像素，垂直方向最多有1个像素。（我知道，太糟糕了。）

看看固定代码是如何工作的！
作为一个小问题，你为什么不使用CSS网格并简单地交换位置？@BálintGácsfalvy所有图像的大小都完全相同？@connexo I使它们在这些之后可以拖拽。如果它们在网格中，这不会影响它们吗？@NiklasE。是的。我刚才仔细检查了一下。是的！！谢谢！我想我喜欢ep使用这种快速而肮脏的方式，因为它对我来说太简单了。谢谢你解释发生了什么，你给了我多种解决方案。我希望如果你问一个问题，你会得到同样类型的答案。