如何使用 Isotope 和 Masonry layout sortby random 避免间隙答案

【问题标题】：How to avoid gaps using Isotope with Masonry layout sortby random如何使用 Isotope 和 Masonry layout sortby random 避免间隙
【发布时间】：2015-11-09 19:40:05
【问题描述】：

我正在使用 Isotope 和 Masonry 布局，我注意到有时会在一个盒子和另一个盒子之间留下间隙（如果有空间可以容纳另一个盒子）。但有时，如果我刷新页面，就可以了，它填补了所有空白。（因此我认为这不是css的问题）我对项目使用流体尺寸，并且我有 sortBy: random 模式。

我发现还有另一个脚本 isotope-perfectmasonry，但似乎只适用于旧版本的 masonry (v1)

这是我的代码

var $grid = $('.grid').imagesLoaded( function() {
  // init Isotope after all images have loaded
   $('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry',
    sortBy : 'random',
    percentPosition: true,
    masonry: {
      columnWidth: '.grid-sizer',
      gutter: '.gutter-sizer'
    }
  });
});

是否有可能填补所有空白，或者因为它是随机的而不可能？知道如果有一些差距，我该如何触发重新布局？

【问题讨论】：

一个 jsfiddle 或一个链接会很有帮助。
感谢@Macsupport 的回复，这里有一个codepen codepen.io/mp1985/full/epQJQL 如果您以“整页”模式打开页面，您会看到这种奇怪的行为。您可以尝试刷新页面，您会注意到有时会出现空白。谢谢

标签： javascript css jquery-isotope jquery-masonry masonry

【解决方案1】：

为避免空白，您应该使用 Isotope 的packery 布局模式。

这里有一个codepen 演示了这一点。

唯一的区别是添加了用于包装布局的外部 javascript 文件 (https://rawgit.com/metafizzy/isotope-packery/master/packery-mode.pkgd.min.js)，并且同位素代码已更改为以下内容。

$('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'packery',
  sortBy: 'random',
  percentPosition: true,
  packery: {
    columnWidth: '.grid-sizer',
    gutter: '.gutter-sizer'
  }
});

【讨论】：