同位素 - 在单个页面上加载多个容器答案

【问题标题】：Isotope - Loading more than one container on a single page同位素 - 在单个页面上加载多个容器
【发布时间】：2015-01-16 01:02:44
【问题描述】：

我正在为同一页面上的多个容器调用同位素布局。我希望每个容器 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 块。在这里的任何帮助将不胜感激！谢谢！

【问题讨论】：

您不能在一个页面上两次使用同一个 ID。它们是独一无二的。

标签： javascript jquery jquery-isotope jquery-masonry

【解决方案1】：

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

jsfiddle

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

【讨论】：

【解决方案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'
 }
});

【讨论】：