0

我正在使用同位素插件。我正在尝试将图像打包在 div 中。我有问题穿着物品没有正确包装并且有很大的空白

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

  • 大 - 500px
  • 中等 - 250 像素
  • 小 - 150 像素

我正在使用以下代码进行初始化

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

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

我知道砌体使用第一项来确定柱宽，但无论我先使用大项还是小项。两者似乎都没有很好地打包在一起。

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

在此处输入图像描述

我不确定为什么前两项是紧挨着的，但是第二项和第三项之间有一个差距（Location Promo (md) 1, Blog Promo (lg) 1）

这是我把最大的项目放在第一位的结果 在此处输入图像描述

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

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

编辑： 我偶然发现了完美的砌体插件，我正在尝试实现它，但我得到了错误

无法读取此行上未定义的属性“布局”

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

新图片 在此处输入图像描述

4

1 回答 1

1

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

这是我更新的电话

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

     itemSelector: '.iso-container'
});

得出这个数字的方法是选择对象不重叠的最小公倍数。

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

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

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

将物品放置为：大、小、小、中可能会留下空白，但按小、大、小、中的顺序可能会很好地包装在一起。

于 2013-08-01T16:23:42.530 回答