绑定无限滚动+砌体插件答案

【问题标题】：Bind Infinite Scroll + Masonry plugins绑定无限滚动+砌体插件
【发布时间】：2015-06-02 21:14:31
【问题描述】：

我想使用infinite scroll 和Masonry 插件来显示我的图片。但是我完全被 HTML 部分卡住了。

我使用下面的代码绑定了两个插件，但是我不知道如何在dom中显示我的html类.navigation和.nav-previous a让它发挥作用。

$(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>

【问题讨论】：

标签： jquery html jquery-masonry infinite-scroll

【解决方案1】：

你的链接可以是这样的：

<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 );
  });

  });

【讨论】：