javascript - 如何修复 masonry 插件产生的奇怪布局

Question

我正在使用 masonry 脚本在我的网站上创建一个图像面板。我为图像设置了三种不同的尺寸，分别为 33%、50% 和 66%，所以一切都应该很好地组合在一起，但我得到了这个:

第一行没问题，但第二行应该是“四位名人的婚礼”照片，然后最好是蓝色的“alan titchmarsh”照片，而不是“今天早上”的照片。我已经在使用 imagesLoaded 扩展，因此它会在加载图像后对其进行排列。想知道是否有人知道如何解决这个问题？

我的 html:

<div class="masonry">
      <div class="masonry-sizer"></div>
      <div class="masonry-item masonry-item--width3"><img src="images/press/masonry/1.png" /></div>
      <div class="masonry-item"><img src="images/press/masonry/2.png" /></div>
      <div class="masonry-item masonry-item--width2"><img src="images/press/masonry/3.png" /></div>
      <div class="masonry-item masonry-item--width2"><img src="images/press/masonry/4.png" /></div>
      <div class="masonry-item masonry-item--width3"><img src="images/press/masonry/5.png" /></div>
      <div class="masonry-item"><img src="images/press/masonry/6.png" /></div>
      <div class="masonry-item"><img src="images/press/masonry/7.png" /></div>
      <div class="masonry-item"><img src="images/press/masonry/8.png" /></div>
</div>

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
  var $grid = $('.masonry').masonry({
    itemSelector: '.masonry-item',
    columnWidth: '.masonry-sizer',
    percentPosition: true,
    horizontalOrder: true,
    initLayout: false
  });

  $grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
  });
</script>

我的 SCSS:

.masonry:after {
content: '';
display:block;
clear: both;
}

.masonry-item, .masonry-sizer {
width: 33.333%;
float: left;
img{
    display: block;
    width: 100%;
    }
}

.masonry-item--width2 { width: 50%; }
.masonry-item--width3 { width: 66.666%; }

Answer 1

搞定了!对于可能遇到相同问题的任何人:

masonry-sizer(默认情况下为 grid-sizer)类必须是一个适合所有其他 masonry 元素的数字，没有余数。因此，此处使用 33.33% 不适用于 50% 的 masonry 元素大小。我将 masonry-sizer 更改为 25%，然后所有 masonry-items 都是 25%、50% 或 75% 等。