1
我想使用砌体初始化一个网格，但网格项目没有正确对齐，因为在某些情况下它们之间仍然有空间。砌体（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/[email protected]/imagesloaded.pkgd.js"></script>
<script src="https://npmcdn.com/[email protected]/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'
});
});