Question

我正在尝试使用Images Loaded创建一个干净的，整页宽度的Masonry网格布局。我遇到的一个问题是网格项之间有时会有不需要的空间。这个不需要的空间取代了网格项目，导致它们向右推得太远。

立即调整页面大小会使问题消失。

这个问题并不总是会发生，但是当某些尺寸的特定数量的图像出现在网格中时，一直会出现这种情况。

此外，我意识到我可以通过使每个网格项等于设定的高度来防止不需要的空间，但是，这不是一个可行的解决方案，因为我不希望网格项具有设置的高度。

虽然我看到许多关于砌体的问题没有正确格式化，但我看到的答案都没能解决这个问题。

我在下面添加了一个指向Codepen的链接。

$(document).ready(function () {
  $("#grid").imagesLoaded().done(function () {
    $("#grid").masonry({
      columnWidth: '#grid-sizer',
      itemSelector: '.grid-item'
    });
  });
});

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { margin: 0; }

#grid-container { padding: 5px; }
#grid { width: 100%; }
#grid-sizer, .grid-item { width: 100%; }
@media only screen and (min-width: 480px) { #grid-sizer, .grid-item { width: calc(100% / 2); } }
@media only screen and (min-width: 768px) { #grid-sizer, .grid-item { width: calc(100% / 3); } }
@media only screen and (min-width: 992px) { #grid-sizer, .grid-item { width: calc(100% / 4); } }
@media only screen and (min-width : 1200px) { #grid-sizer, .grid-item { width: calc(100% / 5); } }
.grid-item { padding: 5px; background: blue; }
.grid-item img {
  display: block;
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.0/dist/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<div id="grid-container">
        <div id="grid">
          <div id="grid-sizer"></div>
          <div class="grid-item"><img src="http://lorempixel.com/400/200/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/300/200/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/500/200/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/400/450/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/400/400/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/400/400/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/450/400/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/400/450/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/400/450/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/400/400/"></div>
          <div class="grid-item"><img src="http://lorempixel.com/200/300/"></div>
        </div>
      </div>

Codepen

带有图像的砌体在初始加载时无法正常工作

0 个答案: