Jquery 具有不同目标 div 的两个不同页面上的同位素

Question

我有两个不同的页面需要使用 Isotope 进行砌体布局。我当前的代码控制一页...

$(function(){
var $container = $('#photo-container');
$container.imagesLoaded( function(){
    $container.isotope({
        itemSelector : '.photo-item',
        masonry: {
  columnWidth: 380,
    isFitWidth: true
}
    });
});

我需要为选择器为“#blog-container”和“.blog-item”（而不是#photo-container/.photo-item）的另一个页面添加该函数的第二个实例

我不知道如何将所有这些写在一个函数中，以便我可以在两个不同的页面上使用同位素。任何帮助表示赞赏。

Answer 1

试试这是你的 js 文件：

$(function(){
var $container = $('#photo-container');
$container.imagesLoaded( function(){
$container.isotope({
    itemSelector : '.photo-item',
    masonry: {
columnWidth: 380,
isFitWidth: true
}
});

var $container2 = $('#blog-container');
$container2.imagesLoaded( function(){
$container2.isotope({
    itemSelector : '.blog-item',
    masonry: {
 columnWidth: 380,
isFitWidth: true
}
  });

  });

Jquery 具有不同目标 div 的两个不同页面上的同位素

Jquery Isotope on two different pages with different target divs

javascript

jquery

jquery-isotope