Javascript 砌体：可以'；不能消除垂直间隙

我在我的网站上使用砖石。以下是我的HTML：

<div class="grid">
    <div class="grid-sizer"></div>
    <div class="grid-item"><img src="A"></div>
    <div class="grid-item"><img src="B"></div>
    ....many more photos....
</div>

我的JavaScript，使用Browserify：

var Masonry = require('masonry-layout');
var docReady = require('doc-ready');
var imagesLoaded = require('imagesloaded');

docReady( function() {
   var grid = document.querySelector('.grid');
   var msnry = new Masonry( grid, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
   });
   imagesLoaded( grid, function() {
      msnry.layout();
  });

 });

结果图像中有许多较大的垂直间隙。我想我已经复制并粘贴了砖石结构中所示示例中的代码

---

谢谢你的帮助

a或a会给你更好的机会得到一个又好又快的答案！顺便说一句，砖石结构并没有声称能够消除各个方向的缝隙。除非您的商品尺寸和顺序都正确，否则很可能会有一些。也许对你来说是个更好的选择。很抱歉我找不到小提琴。垂直间隙不小，与图像高度一样大。所以图像大小一定有问题。@J4G谢谢你的回答。那么，我应该如何准备图像以充分利用砌体？所有图像的宽度或高度相等实际上是确保没有不必要的间隙的唯一方法。

var Masonry = require('masonry-layout');
var docReady = require('doc-ready');
var imagesLoaded = require('imagesloaded');

docReady( function() {
   var grid = document.querySelector('.grid');
   var msnry = new Masonry( grid, {
      itemSelector: '.grid-item',
      columnWidth: '.grid-sizer',
      percentPosition: true
   });
   imagesLoaded( grid, function() {
      msnry.layout();
  });

 });