我有一个包含4个选项的选择框,选择每个选项将导致删除所有当前的.item div并加载新的.items然后使用同位素重新排列它们.
$('.menu-select').change(function(){
var selected=$('.menu-select-option:selected').html().toLowerCase();
if(selected=='all')
{
loadContent('mixed_home_all.html');
}
if(selected=='recommended')
{
loadContent('mixed_home_reco.html');
}
if(selected=='popular')
{
loadContent('mixed_home_pop.html');
}
});
loadContent函数如下所示：
function loadContent(filename){
var $item=$('.item');
$container.isotope('remove',$item);
$container.load(filename,function(){
$container.imagesLoaded(function(){
$container.isotope('reLayout');
});
});
}
解决方法
我通过破坏先前的同位素并为选择框中的每个值触发一个新同位素来解决这个问题.我的loadContent函数现在看起来像这样：
function loadContent(filename){
var $item=$('.item');
$container.isotope('destroy'); //destroying isotope
$container.load(filename,function(){
$container.imagesLoaded(function(){
$container.isotope({ //triggering isotope
itemSelector: '.item'
});
});
});
}
