如何避免使用同位素与砌体布局随机排序的间隙

How to avoid gaps using Isotope with Masonry layout sortby random

本文关键字：随机 布局 排序 间隙 何避免 同位素      更新时间：2023-09-26

我使用的是带有砖石布局的同位素，我注意到有时会在一个盒子和另一个盒子之间留下间隙（如果有空间容纳另一个箱子的话）。但有时，如果我刷新页面，它就可以填补所有空白。（出于这个原因，我不认为这是css的问题）我使用流体尺寸的项目，我有排序方式：随机模式。

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

有可能填补所有的空白吗？还是因为它是随机的而不可能？知道如果有间隙，我该如何触发关系吗？

为了避免间隙，您应该使用同位素的包装布局模式。

这是一个演示代码笔。

唯一的区别是添加了用于包装厂布局的外部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'
  }
});
相关文章：