javascript - 页面右侧的空白

如何消除页面右侧的不希望有的白色边框？

该网站基本上可以动态调整网格上图像的大小，这是一个视频：https://vine.co/v/h2wtnw6K3H0

CSS：

body {

    height: 100%;
    width: 100%;
    margin: 0;
}

grid {

    height: 100%;
    width: 100%;
}

.gridImage {

    vertical-align: bottom;

    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

JS：

function resize() {

    console.log($(window).width());

    var newBody = "";

    for (var i = 0; i <= 100; i++) {

        newBody += '<img class="gridImage" src="Images/image2.jpg" width="' + $(window).width() / Math.floor(($(window).width() / 100)) + 'px" height="' + $(window).width() / Math.floor(($(window).width() / 100)) + 'px">';
    }

    document.getElementById("grid").innerHTML = newBody;
}

如果我的边距为零，为什么会显示出来？我有什么想念的吗？谢谢。

最佳答案

Ridcully已解决了问题所在，但这是解决方案。

首先，您需要计算每个图像的所需宽度。这只是包装在Math.ceil()中的当前方程式。

var windowWidth = $(window).width() // A slight performance improvement, plus cleaner code
var maxImageWidth = <your value here>

var unroundedImageWidth = windowWidth / Math.floor(windowWidth / maxImageWidth)
var   roundedImageWidth = Math.ceil(unroundedImageWidth)

除非您的图像完美匹配，否则这将使每一行都比窗口稍宽，从而导致每行上的最终图像都换行到下一行。为避免这种情况，您需要将gridContainer的宽度设置为每行的宽度。

$('.gridContainer').width(windowWidth * roundedImageWidth / unroundedImageWidth)

除了一件事：水平滚动条，其他所有内容都应该看起来不错。但是，这很容易解决。将此添加到您的CSS：

.gridContainer {
    overflow-x: hidden;
}

这将同时隐藏滚动条和每行最后的几个像素。完善！好吧，不完全是。

这种方法的问题在于，每行一幅图像对其他所有图像都具有命中率（丢失像素）。如果您的图片很小，每行有很多图片，那么最终可能会损失很大一部分。

为避免这种情况，您可以向上舍入图像宽度，并将溢出分布在行中的所有图像之间。这比以前的方法稍微复杂一点，但是确实可以提供更好的结果。

您还需要计算三个数字。

var imagesPerRow = windowWidth / unroundedImageWidth
var numOfRows = Math.ceil($('.gridContainer img').length / imagesPerRow)
var spillage = windowWidth / roundedImageWidth - windowWidth // Pixels we have to lose

现在，只需分配泄漏物即可。

var i = 0 // Loop counter

while (spillage !== 0) {
     // Set the width of all images in column i to the width of that column - 1
     $('.gridContainer img:nth-child(' + imagesPerRow + 'n-' + (i+1) + ')')
         .width($('.gridContainer img:nth-child(' + (i+1) + ')').width() - 1)

    spillage--
    i++
}

图像宽度之间的像素差不应超过一个。