执行搜索功能后，jQuery Isotope中的Infinitescroll失败

我正在使用Isotope和infinitescroll将图像加载到图像库中。在搜索完成后，我使用Quicksearch添加了搜索功能来过滤图像并重新布局同位素。如果我在搜索之前应用infinitescroll，它可以完美地工作，但是如果我先搜索然后尝试应用infinitescroll，那么它会显示加载图标等，但不会加载图像。这里是我的代码：执行搜索功能后，jQuery Isotope中的Infinitescroll失败

// ======================= Isotope =============================== 

var $container = $('#container'); 

$(function(){ 
    $container.imagesLoaded(function(){ 
    $(this).isotope({ 
     itemSelector : '.item', 
     masonry : { 
     columnWidth : 130 

} 

    }); 
    }); 
// ======================= search ===============================  


$('input#discussion-search').quicksearch('#container .item', { 
    'show': function() { 
     $(this).addClass('quicksearch-match'); 
    }, 
    'hide': function() { 
     $(this).removeClass('quicksearch-match'); 
    } 
}).live("keyup", function(){ 
    setTimeout(function() { 
     $container.isotope({ filter: '.quicksearch-match' }); 
    $container.isotope('reLayout'); 
    }, 100); 
}); 

}); 


// ======================= Infinite Scroll =============================== 

$container.infinitescroll({ 
navSelector : 'a#nav', // selector for the paged navigation 
nextSelector : 'a#nav', // selector for the NEXT link (to page 2) 
itemSelector : '.item',  // selector for all items you'll retrieve 
loading: { 
finishedMsg: 'No more Images to load.', 
img: 'res/icons/load.gif', 
msgText: "<em>Loading Images...</em>" 
}, 
behavior : 'twitter', 
errorCallback: function() { 
    // fade out the error message after 2 seconds 
    $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal'); 
} 
}, 
// call Isotope as a callback 
function(newElements) { 
    $container.isotope('insert', $(newElements)); 
} 
); 


$('a#Button').click(function(e){ 
// call this whenever you want to retrieve the next page of content 
// likely this would go in a click handler of some sort 
e.preventDefault(); 
    $container.infinitescroll('retrieve'); 
$('a#nav').hide(); 
return false; 
});

来源

2011-11-15 Macsupport

看来我至少暂时找到了解决这一问题的作品，虽然它可能不是最好的解决办法。我给infinitescroll添加了一个回调函数，让同位素过滤器“显示全部”，然后添加查找代码，以便可以搜索新的，添加的图像

$container.infinitescroll({ 
navSelector : 'a#nav', // selector for the paged navigation 
nextSelector : 'a#nav', // selector for the NEXT link (to page 2) 
itemSelector : '.item',  // selector for all items you'll retrieve 
loading: { 
finishedMsg: 'No more Images to load.', 
img: 'res/icons/load.gif', 
msgText: "<em>Loading Images...</em>" 
}, 
behavior : 'twitter', 
errorCallback: function() { 
    // fade out the error message after 2 seconds 
    $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal'); 
} 
}, 
// call Isotope as a callback 
function(newElements) { 
    $container.isotope('insert', $(newElements)); 

$container.isotope({ filter: '*' }); 
$('input#discussion-search').quicksearch('#container .item', { 
    'show': function() { 
     $(this).addClass('quicksearch-match'); 
    }, 
    'hide': function() { 
     $(this).removeClass('quicksearch-match'); 
    } 
}).live('keyup',function(){ 
    setTimeout(function() { 
     $container.isotope({ filter: '.quicksearch-match' }); 
$container.isotope(); 

    }, 100); 
});

来源

2011-11-15 23:56:36 Macsupport

执行搜索功能后，jQuery Isotope中的Infinitescroll失败

回答

相关问题