Изотоп - загрузка нескольких контейнеров на одной странице

Question

Я нахожу изотопную схему для нескольких контейнеров на одной странице. Ловушка Я бы хотел, чтобы каждый идентификатор контейнера был таким же. Использование http://isotope.metafizzy.co v.2.1.0

Изотоп будет работать для первого блока, но не запускается для второго блока. Я чувствую, что однажды изотопный макет попадает в первый идентификатор первого контейнера, который он останавливает, и снова не ищет тот же контейнер. Я попытался использовать .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 элементов, но для простоты я отрубил его. Причина для нескольких вызовов заключается в том, что они будут для разных категорий, и между ними будут другие элементы, и я бы предпочёл не называть кучу идентификаторов контейнеров.

Когда я пытаюсь запустить # изотоп-cat-list в моей .js-библиотеке, он будет работать для первого блока, но не будет запускаться для второго блока. Я пробовал сделать 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

Как я уже говорил, идентификаторы уникальны. Вы можете использовать класс несколько раз так (некоторые из ваших функций отсутствуют, поэтому мне пришлось изменить ваш код по этой причине). Вы вызываете изотоп, используя опционы 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: '.grid-sizer'. Также containerStyle position: relativeпо умолчанию, поэтому бесполезно говорить об этом в опциях. Также водосточный желоб бессмыслен в вашем случае, поскольку вы можете просто использовать margins в css для своих товаров.

Для вашего вопроса вы могли бы сделать:

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