執行搜索功能後，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失敗

回答

相關問題