javascript - 如何将同位素与砌体布局一起使用来避免间隙按随机排序

我在用石工布局使用同位素时，我注意到有时在一个盒子和另一个盒子之间留有空隙（如果还有空间适合另一个盒子）。
但是有时候，如果我刷新页面，就可以了，并且可以填补所有空白。 （因此，我认为这不是css的问题）
我为项目使用流体尺寸，并且具有sortBy：随机模式。

我发现还有另一个脚本同位素完美砌体，但似乎仅适用于旧版本的砌体（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'
    }
  });
});

有可能填补所有空白吗？还是因为它是随机的而不可能？
任何想法，如果有一些差距，我该如何触发重新布局？

最佳答案

为避免出现间隙，应使用同位素的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'
  }
});

关于javascript - 如何将同位素与砌体布局一起使用来避免间隙按随机排序，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33616880/