Question

我在同一页面上为多个容器调用同位素布局。抓住它我希望每个容器ID都是一样的。使用http://isotope.metafizzy.co v.2.1.0

同位素将适用于第一个块，但不会触发第二个块。我的感觉是，一旦同位素布局击中它停止的第一个容器的第一个ID，并且不会再次查找同一个容器。我尝试过使用.each（） - 但似乎并不想工作。

<div id="isotope-cat-list">
    <div class="grid-sizer"></div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
</div>

然后我需要再次调用另一个同位素块布局：

<div id="isotope-cat-list">
    <div class="grid-sizer"></div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
</div>

完整HTML将如下所示：

<div id="isotope-cat-list">
    <div class="grid-sizer"></div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
</div>
<div id="isotope-cat-list">
    <div class="grid-sizer"></div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
    <div class="box">
         <h1>TITLE</h1>
    </div>
</div>

显然，这些.box元素中有更多元素，但为了简单起见，我将其缩小了。多次调用的原因是它们将用于不同的类别，并且在其间具有其他元素，我宁愿不必调用一堆容器ID。

当我尝试在我的.js库中触发＃isotope-cat-list时，它将运行第一个块 - 但不会触发第二个块。我尝试过做一些jQuery .each（）但是没有用。

这是JS：

var mainEl = $('#isotope-cat-list');

mainEl.isotope({
    animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
    itemSelector: '.box',
    animationOptions: {
        duration: transitionDuration
    },
    containerStyle: {
        position: 'relative',
        overflow: 'visible'
    },
    masonry: {
        columnWidth: columnWidth,
        gutter: 1
    }
});

我尝试过.each（）：

var mainEl = [$('#isotope-cat-list')];

$.each(mainEl, function (j) {
        this.isotope({
        animationEngine: 'best-available', //CSS3 if browser supports it, jQuery otherwise
        itemSelector: '.box',
        animationOptions: {
            duration: transitionDuration
        },
        containerStyle: {
            position: 'relative',
            overflow: 'visible'
        },
        masonry: {
            columnWidth: columnWidth,
            gutter: 1
        }
    });
});

但它仍然没有触发第二个HTML块。这里的任何帮助将不胜感激！谢谢！

Answer 1

正如我所说，ID是独一无二的。你可以多次使用一个类（你的一些函数丢失了，所以我不得不修改你的代码）。您使用v1.56选项调用同位素，而不是v2。更新的代码

jsfiddle

var mainEl = $('.isotope-cat-list');
mainEl.isotope({
itemSelector: '.box',
transitionDuration: '0.3s',
masonry: {
     columnWidth: '.grid-sizer',
    gutter: 10
}
});

Answer 2

您使用的是isotope V2，它仅使用css3制作动画，因此您不应该使用 animationEngine or animationOption。此外，您使用的是"grid-sizer"，应该是您在columnWidth中应用的内容。例如。 columnWidth: '.grid-sizer'。此外，containerStyle默认为position: relative ，因此在选项中说出它是没用的。此外，在您的情况下，排水沟也毫无意义，因为您只需在css中使用margins即可获得物品。

对于你的问题：

var mainEl = $('.isotope-cat-list');
mainEl.isotope({
 itemSelector: '.box',
 masonry: {
  columnWidth: '.grid-sizer'
 }
});

var mainEl2 = $('.isotope-cat-list-2');
mainEl2.isotope({
 itemSelector: '.box',
 masonry: {
  columnWidth: '.grid-sizer'
 }
});

同位素 - 在一个页面上加载多个容器

2 个答案: