如何修复砌体插件产生的奇怪布局

Question

我正在使用砌体脚本在我的网站上创建一个图像面板。我为图像设置了三种不同的大小，分别是33％，50％和66％，所以一切都应该很好地融合在一起，但是我得到了：

第一行很好，但第二行应该是“名人四次婚礼”照片，然后最好是蓝色的“艾伦·蒂奇马什”照片，而不是“今天早上”照片。我已经在使用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

解决了！对于可能遇到相同问题的任何人：

砌体尺寸（或默认情况下为网格尺寸）类必须为可与所有其他砌体项目相匹配的数字，且不得剩余。因此，此处使用33.33％的尺寸不适用于50％的砖石结构。我将砌体尺寸更改为25％，然后所有砌体项目均为25％，50％或75％等。