同位素 - 在單個頁面上加載多個容器

我在同一頁面上調用多個容器的同位素佈局。抓住它，我希望每個容器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的多個元素，但爲了簡單起見，我削減了它。多次調用的原因是它們將用於不同的類別，並且在其間還有其他元素，我寧願不必調用一堆容器標識。

當我嘗試觸發我的.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 
    } 
});

我試着做。每個（）：

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塊。任何幫助在這裏將不勝感激！謝謝！

來源

2015-01-16 John

不能在網頁上使用相同的ID兩次。它們是獨特的。 – Macsupport

正如我所說，身份證是獨一無二的。你可以像這樣多次使用一個類（你的一些函數丟失了，所以我必須修改你的代碼）。您使用v1.56選項調用同位素，而不是v2。更新代碼

jsfiddle

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

來源

2015-01-16 06:58:43 Macsupport

您正在使用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' 
} 
});

來源

2015-01-16 10:54:17

同位素 - 在單個頁面上加載多個容器

回答

相關問題