同位素重疊圖像不起作用

我希望社區能夠提供幫助。我大概知道需要做什麼，除了我不知道如何閱讀代碼。我在下面添加的內容向您展示了工作過濾器代碼，其中有兩個不同的選項，我對imageLoaded進行了研究。除了我取消註釋片段時，它修復了堆疊，但是根本無法過濾。我可以做一些建議請。同位素重疊圖像不起作用

<script type="text/javascript"> 

$(function() { 

// init Isotope 
    var $container = $('.isotope').isotope({ 
    itemSelector: '.element-item', 
    layoutMode: 'fitRows' 
    }); 

//method 1 to stop stacking 
// var $container = $('.isotope').imagesLoaded(function() { 
// $container.isotope({ 
//  itemSelector: '.element-item', 
//  layoutMode: 'fitRows' 
// }); 
// }); 



    // bind filter button click 
    $('#filters').on('click', 'button', function() { 
    var filterValue = $(this).attr('data-filter'); 
    $container.isotope({ filter: filterValue }); 
    }); 


    // change is-checked class on buttons 
    $('.button-group').each(function(i, buttonGroup) { 
    var $buttonGroup = $(buttonGroup); 
    $buttonGroup.on('click', 'button', function() { 
     $buttonGroup.find('.is-checked').removeClass('is-checked'); 
     $(this).addClass('is-checked'); 
    }); 
    }); 

//method 2 to stop stacking 
// layout Isotope again after all images have loaded 
// $container.imagesLoaded(function() { 
// $container.isotope('layout'); 
// }); 



}); 

</script>

來源

2015-01-20 user2004211

您需要製作一個jsfiddle。你使用的是什麼版本的同位素？ – Macsupport 2015-01-21 18:17:29

我不知道如何建立一個jsfiddle，但我知道我的版本：*同位素PACKAGED v2.1.0 – user2004211 2015-01-21 21:48:01

Imagesloaded不包含在同位素v2中，因爲它與v1.5版本一樣，所以您需要確保它是單獨加載的。下載它here幷包括在您的網頁上。然後使用此設置：

var $container = $('.isotope'); 
$container.imagesLoaded(function() { 
$container.isotope({ 
itemSelector: '.element-item', 
layoutMode: 'fitRows' 
}); 
});

來源

2015-01-21 22:04:36 Macsupport

感謝你的，這似乎已經完成了這項工作。我不認爲我會知道它在V2中失蹤。 – user2004211 2015-01-22 16:34:31

同位素重疊圖像不起作用

回答

相關問題