如何在此masonry.js布局中删除每张图片下方的水平空白？

Question

我正在努力删除空白或将其填满。 我以为该库默认情况下会加入gutters选项，但是我尝试将其设置为0并没有实现我的目标。

我还尝试使用height: 100%使图像填充容器的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>