Как удалить горизонтальное пустое пространство под каждым изображением в этом макете masonry.js?

Question

Я изо всех сил пытаюсь удалить пробел или заполнить его.Я думал, что библиотека добавляла опции gutters по умолчанию, но я попытался установить ее на 0, и она не достигла моих целей.

Я также пытался заставить мое изображение заполнить высотуконтейнера с помощью height: 100%.Также не удалось.Я почти построчно копирую html, css и js из этого примера здесь .

Вот мой код:

window.onload = function() {
  var msnry = new Masonry( anchor, {
  percentPosition: true,
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
});
}

const anchor = document.querySelector('.gallery');

//added a forward slash at the end of url
let randomURL = 'https://source.unsplash.com/random/';

generateItems(15);

function generateItems(num) {
  for (i=0; i<num; i++) {
    //this adds a number to the end of the url so that the same image isn't used repeatedly
    randomURL += num;
    //create nested elements and append to body
    const gridItem = document.createElement('div');
    const img = document.createElement('img');
    img.setAttribute('src', randomURL);
    gridItem.classList.add('grid-item');
    gridItem.appendChild(img);
    anchor.appendChild(gridItem);
    console.log('added one');
  }
  
  console.log('Added HTML');
}

* { box-sizing: border-box; }

html {
  overflow-y: scroll;
}

.grid-sizer, .grid-item {
  width: 20%;
}

.grid-item {
  float: left;
}

img {
  width: 100%;
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<div class="gallery">
  <div class="grid-sizer"></div>
</div>

Я изо всех сил пытаюсь выяснить, почему существует этот пробел, и как лучше удалить его для отображения от края до края.

Я вытаскиваю свои изображения из случайных всплесков, используя Javascript.

Answer 1

Добавить vertical-align:top или display:block к элементам img.

Рабочий пример ( изменено )

window.onload = function() {
  var msnry = new Masonry(anchor, {
    percentPosition: true,
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
  });
}

const anchor = document.querySelector('.gallery');

//added a forward slash at the end of url
let randomURL = 'https://source.unsplash.com/random/';

generateItems(15);

function generateItems(num) {
  for (i = 0; i < num; i++) {
    //this adds a number to the end of the url so that the same image isn't used repeatedly
    randomURL += num;
    //create nested elements and append to body
    const gridItem = document.createElement('div');
    const img = document.createElement('img');
    img.setAttribute('src', randomURL);
    gridItem.classList.add('grid-item');
    gridItem.appendChild(img);
    anchor.appendChild(gridItem);
    console.log('added one');
  }

  console.log('Added HTML');
}

* {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

.grid-sizer,
.grid-item {
  width: 20%;
}

.grid-item {
  float: left;
}

img {
  width: 100%;
  display: block;
}

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
<div class="gallery">
  <div class="grid-sizer"></div>
</div>