如何使用带有 Masonry 布局的同位素来避免间隙 sortby random

Question

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

我发现还有另一个脚本 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'
    }
  });
});

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

Answer 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'
  }
});

如何使用带有 Masonry 布局的同位素来避免间隙 sortby random

How to avoid gaps using Isotope with Masonry layout sortby random

javascript

css

jquery-isotope

jquery-masonry

masonry