javascript - masonry (JQuery 网格)不工作

Question

我想用 Masonry 初始化一个网格，但是网格元素没有正确对齐，因为在某些情况下它们之间仍然有垂直空间。

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>

html:

<section id="today" class='grid'>
    <div class='grid-sizer'></div>
    <div class='grid-item'>
    <img src='https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/s720x720/1001031_10154343257470995_850520884545445540_n.jpg?oh=32aa4b9d1d384b4f8b5b136d3cd4dde7&oe=582D8869&__gda__=1479470169_2de9e234d0cd9ae1f1184a4e25f24670'/><p>SKIP&DIE Soundsystem / 45 AcidBabies / Zuco 103 - Melkweg Amsterdam</p></div><div class='grid-item'><img src='https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpa1/t31.0-8/s720x720/12983384_1185467218139364_7077287717377870878_o.jpg'/><p>Harts - Melkweg Amsterdam</p></div><div class='grid-item'><img src='https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xta1/v/t1.0-9/p720x720/12249583_10154111715195995_49623518742428508_n.jpg?oh=ec878f47f25e788762b7044a1b7d02e4&oe=582EF7B7&__gda__=1477798338_414bce03cf19a6d4e8702d86c4be303f'/><p>DJ Krush - Melkweg Amsterdam</p></div><div class='grid-item'><img src='https://scontent.xx.fbcdn.net/t31.0-0/p480x480/13719441_10154401315668338_4190606094111752048_o.jpg'/><p>Traumahelikopter in Paradiso</p></div><div class='grid-item'><img src='https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xfp1/t31.0-8/q82/s720x720/13116379_10154222440488338_4931004388804839728_o.jpg'/><p>Kevin Morby in Bitterzoet</p></div><div class='grid-item'><img src='https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xla1/t31.0-8/s720x720/12366127_10154147843065995_7751310900645314254_o.jpg'/><p>Walk the Moon - Melkweg Amsterdam</p></div><div class='grid-item'><img src='https://scontent.xx.fbcdn.net/t31.0-0/p480x480/13247922_10154471355740995_7420329582825654708_o.jpg'/><p>Real Friends - Melkweg Amsterdam</p></div><div class='grid-item'><img src='https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xfa1/v/t1.0-9/s720x720/13015677_10154159847808338_5484729724025590689_n.jpg?oh=df7c783554f36277e6ec3c18faa167f8&oe=582372CF&__gda__=1474925969_1ce5ff8ffc0d25f735c7a211c82872f2'/><p>Palehound in Paradiso, kleine zaal</p></div>           
</section>

CSS:

.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;
}

JQuery:

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

Answer 1

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