Question

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

我发现还有另一个脚本同位素 - perfectmasonry，但它似乎只适用于旧版本的砌体（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

为避免差距，您应该使用同位素的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'
  }
});

如何使用Isotope和Masonry布局排序随机排序

1 个答案: