创建没有空白区域的同位素容器

Question

我正在使用isotope插件。我试图在div中打包图像。我有问题穿戴物品没有正确包装，并有大的白色空间

我正在使用三种尺寸的图像

• large - 500px
• 中 - 250 px
• 小 - 150px

我使用以下代码初始化

$(window).load(function(){
     var $container = $('#item-container');

     $container.isotope({
          layoutMode: 'masonry',
          itemSelector: '.iso-container'
     });
});

我知道砌筑使用第一项来确定库仑宽度，但不管我是先使用大项目还是小项目。两者似乎都没有很好地融合在一起。

这是我首先使用最小图像时的输出。容器的边框是红色的

我不确定为什么前两个项目彼此相邻，但第二个和第三个项目之间存在差距（位置促销（md）1，博客促销（lg）1）

如果我把最大的项目放在首位，这是结果

第二张图片对我来说更有意义。由于大项目确定了列长度，因此容器只有两个库存。我不确定为什么第三项（视频促销（sm1））不在第二项（位置促销（md）1）旁边。

哎呀在第二张图片的前两个项目上看不到名字。我想你仍然能说出我在说什么。

修改   我偶然发现了完美的砌体插件，我正在尝试实现它，但我收到了错误

无法在此行读取未定义的属性'layout'

this.options.perfectMasonry.layout

EDIT2 我得到了它的工作，但它看起来不是更好

新代码

$container.isotope({
    layoutMode: 'perfectMasonry',
    perfectMasonry: {
        layout: 'vertical'
    },
    itemSelector: '.iso-container'

}）;

编辑3

越来越近了。

新代码

$container.isotope({
     layoutMode: 'perfectMasonry',
     perfectMasonry: {
        layout: 'vertical',
        columnWidth: 20,
        rowHeight: 20
     },
     itemSelector: '.iso-container'
});

新形象

Answer 1

使用同位素的关键是选择正确的columnWidth。

这是我更新的电话

$container.isotope({
     layoutMode: 'perfectMasonry',
     perfectMasonry: {
        layout: 'vertical',
        columnWidth: 25
     },

     itemSelector: '.iso-container'
});

您到达此数字的方式是选择对象不重叠的最小公倍数。

在我的情况下，这是25岁。我尝试了5和10，但这没有足够的空间。如果我选择了50，那么对象之间会有空白区域。

容器底部有一个锯齿状的边缘，但是左右两侧，容器中间没有“洞”。

此外，您可能需要尝试容器中不同的物品订单。

将项目放置为：大，小，小，中等可能会留下空白区域，但按顺序执行小，大，小，中等顺序可以很好地包装在一起。