如何使用 Isotope with Masonry layout sortby random 避免間隙

Question

我正在使用 Isotope 與 Masonry 布局，我注意到有時會在一個盒子和另一個盒子之間留下間隙（如果有空間可以容納另一個盒子）。 但有時，如果我刷新頁面，它可以填補所有空白。 （出於這個原因，我不認為這是 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布局模式。

這是一個演示這一點的代碼筆。

唯一的區別是添加了用於 packery 布局的外部 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'
  }
});