时间戳

首页 > 解决方案 > 如何修复砌体插件产生的奇怪布局

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

问题描述

我正在使用 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%; }

标签： javascriptjqueryhtmlcssmasonry

解决方案

修好了！对于任何可能有同样问题的人：

masonry-sizer（或默认情况下的 grid-sizer）类必须是一个适合所有其他 masonry-items 的数字，没有余数。所以在这里使用 33.33% 不适用于 50% 的砌体项目大小。我将 masonry-sizer 更改为 25%，然后所有 masonry-items 为 25%、50% 或 75% 等。

推荐阅读