Question

我知道有几个问题是关于，检查了所有问题，但是因为我不了解如何开始，所以无法开始工作......

我有基本的砖石设置：

现在我如何设置最初显示的元素数量，以及如何触发开始使用无限scoll加载下一个元素？请帮忙

我发现了很多这样的事情：

 jQuery(window).load(function(){

jQuery('.hfeed').masonry({
    singleMode: true, 
    itemSelector: '.box'
});

jQuery('.hfeed').infinitescroll({
  navSelector  : '.pagination',  // selector for the paged navigation 
  nextSelector : '.pagination .next',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loadingImg : '/wp-content/themes/sprppl/images/loader.gif',
  loadingText  : "Loading...",
  donetext  : 'No more pages to load.',
  debug: false,
  errorCallback: function() { jQuery('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   }
  },
  // call masonry as a callback
  function( newElements ) { jQuery(this).masonry({ appendedContent: jQuery( newElements ) }); }
);      

});

但是当我插入它时，没有任何反应..如何从这里开始？

Answer 1

这是

jsFiddle

使用您的javascript外部资源更正和修复代码以及一些infinitescroll代码。您需要创建一个index2.html页面，其中包含要加载的项目以进行测试，因为我无法将其放入小提琴中。最简单的测试方法是复制页面并将其命名为index2.html。

$(document).ready(function() {
var $container = $('#content');
$container.imagesLoaded(function() {
// Initialize Masonry
$container.masonry({
    columnWidth: 320,
    itemSelector: '.item',
    isFitWidth: true,
    isAnimated: !Modernizr.csstransitions
});

});
$container.infinitescroll({
  navSelector  : 'a#next',  // selector for the paged navigation 
  nextSelector : 'a#next',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif',
      msgText: "<em>Loading the next set of posts...</em>"
    },
errorCallback: function() { $('#infscr-loading').animate({opacity: 0.8},2000).fadeOut('normal');      }
 },
// call masonry as a callback
  function( newElements ) {
var $newElems = $( newElements );
$container.masonry( 'appended', $newElems );
}
);      
});

jQuery砌体无限卷轴设置

1 个答案: