页面右侧的空白区域

Question

如何摆脱页面右侧不受欢迎的白色边框？

该网站基本上动态调整网格上的图像大小，这是一个视频：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;
}

如果我的保证金为零，为什么会出现这种情况？我缺少什么？感谢。

Answer 1

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++
}

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

Answer 2

这是因为舍入错误。你所做的就是用{100}缩放图像填充grid，这取决于当图像不再适合当前行时浏览器换行到新行。

现在假设宽度为305像素。您的公式为此提供了100的图像宽度，因此您连续获得3个图像，下一个图像包裹到下一行，在右边框留下5个像素空白。

Answer 3

我认为您还应该在代码中添加padding:0;来遗漏它。

尝试它，甚至更好地制作一个jsfiddle，然后检查每个人都会更容易。