Пробел в правой части страницы

0

Изображение 174551

Как мне избавиться от этой нежелательной белой границы справа от страницы?

Веб-сайт в основном динамически изменяет размеры изображений на сетке, здесь видео: 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;
}

Если мои поля равны нулю, почему это появляется? Что-нибудь мне не хватает? Благодарю.

  • 0
    Это полоса прокрутки!
  • 0
    @Hardy Харди Ха-ха, это не полоса прокрутки.
Показать ещё 9 комментариев
Теги:

3 ответа

2
Лучший ответ

Ридкулли осветила проблему, но это решение.

Сначала вам нужно будет вычислить желаемую ширину каждого изображения. Это просто ваше текущее уравнение, завернутое в 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').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++
}

Разницы между ширинами изображений больше не должно быть больше одного пикселя.

Поделиться
  • 0
    Это очень помогло, я могу вручить вам награду завтра.
1

Это из-за ошибок округления. То, что вы делаете, заполняет grid 100 масштабированными изображениями, в зависимости от того, как браузер обертывает новую строку, когда изображение больше не вписывается в текущую строку.

Теперь представьте себе ширину 305 пикселей. Ваша формула дает для этого ширину изображения 100, поэтому вы получаете 3 изображения подряд, а следующая - в следующую строку, оставляя 5 пикселей пустым на правой границе.

Поделиться
  • 0
    Это не должно дать 100 пикселей. Функция Math.floor (), которую я использую, предназначена для определения количества изображений, которое я должен иметь для каждой строки, в зависимости от размера экрана, поскольку 10 изображений на телефоне могут быть слишком маленькими. Однако, как только я получу точное количество изображений, которое я хочу использовать, я использую его для масштабирования каждого изображения, чтобы они были точными.
  • 0
    Например, если размер экрана составляет 305 пикселей, на моем веб-сайте будет показано три изображения для каждой строки, каждая из которых будет иметь ширину 305/3 пикселя.
Показать ещё 3 комментария
0

Я думаю, вы также должны добавить padding:0; для его отсутствия в коде.

Попробуйте, и даже лучше просто сделайте jsfiddle, тогда было бы легче проверить всех.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню