Javascript 砌体（JQuery网格）不工作

我想初始化一个带有砌体的网格，但是网格项没有正确对齐，因为在某些情况下，它们之间仍然有垂直的空间

JS包括：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script>
    <script src="https://npmcdn.com/masonry-layout@4.1/dist/masonry.pkgd.min.js"></script>

JQuery：

var $grid = $('.grid').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $grid.masonry({
        itemSelector: '.grid-item',
        percentPosition: true,
        columnWidth: '.grid-sizer'
    });
});

---

我通过删除CSS中的边距选项并将grid.js放在HTML文件末尾的HTML中修复了这个问题

.grid-sizer, .grid-item {
    width: 23%;
}
.grid-item { 
    float: left;
    margin: 5px 1% 5px 1%;
    height: auto
}
.grid-item img {
    width: 100%;
    height: auto;
}
.grid-item p {
    width: 90%;
    background-color: #000;
    color: white;
    margin: 0;
    padding: 5%;
}
.grid-item:hover p {
    background-color: #333;
}

var $grid = $('.grid').imagesLoaded( function() {
        // init Masonry after all images have loaded
        $grid.masonry({
        itemSelector: '.grid-item',
        percentPosition: true,
        columnWidth: '.grid-sizer'
    });
});