Question

我正在使用Isotope和infinitescroll将图片加载到图片库中。我在搜索执行后使用Quicksearch添加了一个搜索功能来过滤图像和重新同步。如果我在搜索之前应用infinitescroll它完美地工作但是如果我先搜索然后尝试应用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;
 });

Answer 1

似乎我至少暂时找到了解决这个问题的解决方案，虽然它可能不是最好的解决方案。我已经向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 );
 });

执行搜索功能后，无限循环在jQuery Isotope中失败

1 个答案: