绑定 Infinite Scroll + Masonry 插件

Question

我想使用 infinite scroll and Masonry 插件来显示我的图片。但是我完全坚持 HTML 部分。

我使用下面的代码绑定了两个插件，但我不知道如何显示我的 html class .navigation 和 .nav-previous a in the dom 使其工作。

$(window).load(function(){

// Main content container
var $container = $('.grid');

// Masonry + ImagesLoaded
 $container.imagesLoaded(function(){
 $container.masonry({
  // selector for entry content
  itemSelector: '.grid-item',
  columnWidth: 300,
  "gutter": 10
 });
});

// Infinite Scroll
$container.infinitescroll({

// selector for the paged navigation (it will be hidden)
navSelector  : ".navigation",
// selector for the NEXT link (to page 2)
nextSelector : ".nav-previous a",
// selector for all items you'll retrieve
itemSelector : ".grid-item",

// finished message
loading: {
  finishedMsg: 'No more pages to load.'
  }
},

// Trigger Masonry as a callback
function( newElements ) {
  // hide new items while they are loading
  var $newElems = $( newElements ).css({ opacity: 0 });
  // ensure that images load before adding to masonry layout
  $newElems.imagesLoaded(function(){
    // show elems now they're ready
    $newElems.animate({ opacity: 1 });
    $container.masonry( 'appended', $newElems, true );
  });

 });

这是我的 html :

<div class="grid">

  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>
  <div class="grid-item"><img src="#"></div>

</div>

Answer 1

你的link可以是这样的：

<a id="next" href="index2.html">next page?</a>

无限滚动 js 是这样的：

 $container.infinitescroll({
    navSelector     : "#next",
    nextSelector    : "a#next",
  // selector for all items you'll retrieve

 itemSelector : ".grid-item",

 // finished message
 loading: {
 finishedMsg: 'No more pages to load.'
 }
 },

 // Trigger Masonry as a callback
 function( newElements ) {
 // hide new items while they are loading
 var $newElems = $( newElements ).css({ opacity: 0 });
 // ensure that images load before adding to masonry layout
 $newElems.imagesLoaded(function(){
 // show elems now they're ready
 $newElems.animate({ opacity: 1 });
 $container.masonry( 'appended', $newElems, true );
  });

  });