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

Question

I am struggling to remove the whitespace, or have it filled up. I thought the library was throwing in the gutters options in by default, but I tried setting it to 0 and it didn't achieve my goals.

I also tried to make my image fill the height of the container by using height: 100% . Also failed. I am almost line-by-line copying the html, css, and js from this example here .

Here is my code:

 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> 

I am struggling to figure out why there is this whitespace, and how best to remove it for an edge-to-edge display.

I am pulling my images from unsplashed at random using Javascript.

Answer 1

Add vertical-align:top or display:block to the img elements.

Working example ( modified )

 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>