如何为Masonry无限滚动添加自定义触发器

时间:2012-06-20 12:42:55

标签: jquery jquery-masonry infinite-scroll

我有一个使用砌体和无限滚动的页面。一切似乎都应该工作,但我希望我的访问者使用按钮触发无限滚动效果,而不是自动激活触发器。谷歌的图片搜索之类的东西。这是代码,我相信某种......

$("#load-more-button").click(function(){});

......可以放在某个地方......

<script type="text/javascript">

jQuery(document).ready(function($){ var $container = $('#posts');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.post',
    isFitWindow: true
  });
});

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.post',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'Nothing more',
      img: 'images/ajax-loader.gif'
    }
  }, 
  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 ); 

    });
  }
);

});

1 个答案:

答案 0 :(得分:0)

您是否在http://www.infinite-scroll.com/查看了文档?在底部,有一个关于触发器无限滚动的部分。

我很好奇你是否曾经想过这一点,因为我遇到了同样的问题而且似乎无法使它发挥作用。