Jquery 无休止的滚动

以线程为例，我成功地实现了无休止的滚动，但效果不是很好。滚动不顺畅，会多次显示新加载的帖子。以下是我的全部代码：

主计长员额：

@posts = Post.all.paginate(:page => params[:page], :per_page => 5)
respond_to do |format|
 format.html
 format.js
end

posts.js.coffee：

$ ->
$('#pins').imagesLoaded ->
 $('#pins').masonry
   itemSelector: '.box'
   isResizable: true

if $('.pagination').length
    $(window).scroll ->
        url = $('.pagination .next_page a').attr('href')
        if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
            # What to do at the bottom of the page
            $('.pagination').text("Loading more posts...")
            $.getScript(url)
        $(window).scroll()

posts/index.js.erb：

 $boxes = $('<%= j render(@posts) %>')

$('#pins').append( $boxes ).imagesLoaded( function(){
$('#pins').masonry( 'reload');
});
<% if @posts.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@posts) %>');
<% else %>
$('.pagination').remove();
<% end %>

$box=$（''）
$（'#pins'）。追加（$box）。图像加载（函数（）{
$（'#pins'）。砌体（'reload'）；
});
$（'.pagination'）。替换为（''；
$（'.pagination'）.remove（）；

然后，我用以下内容包装视图：

<div class="post-box pins-masonry" data-no-turbolink>

---

将其添加到您的gem文件中

gem "jquery-turbolinks", "~> 2.0.1"
    gem 'masonry-rails'

运行包：安装

在应用程序js文件中，执行以下操作

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks

//= require masonry/jquery.masonry
//= require masonry/jquery.event-drag
//= require masonry/jquery.imagesloaded.min
//= require masonry/jquery.infinitescroll.min
//= require masonry/modernizr-transitions
//= require masonry/box-maker

$(function(){

    var $container = $('#pins');

    $container.imagesLoaded(function(){
        $container.masonry({
            itemSelector: '.box'
        });
    });

    // get new #page-nav
    var nexPageNav = $(this).find('#page-nav');

    // substitute current #page-nav with new #page-nav from page loaded
    $('#page-nav').replaceWith(nexPageNav);

    $container.infinitescroll({
            navSelector  : '.pagination',    // selector for the paged navigation
            nextSelector : '.pagination .next_page',  // selector for the NEXT link (to page 2)
            itemSelector : '.item',     // selector for all items you'll retrieve
            loading: {
                finishedMsg: 'No more wedding dresses to load.',
                img: 'http://i.imgur.com/6RMhx.gif'
            }
        },
        // 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 );
            });
        }
    );
});

你的index.js

var $boxes = $("<%= j render @posts %>");

$boxes.imagesLoaded(function() {
  $('#pins').append( $boxes ).masonry( 'appended', $boxes );
});

<% if @posts.next_page %>
$('.pager').prepend('<%= j(render "page_nav", posts: @posts)%>');
<% else %>
$('.pager').hide();
<% end %>

var$box=$（“”）；
$box.imagesLoaded（函数（）{
$（'#pins'）。追加（$box）。砌石（'追加'，$box）；
});
$（'.pager'）。前置（''）；
$（'.pager'）.hide（）；

在我的导航部分

<%= will_paginate posts %>

在my index.html中

我有

<div id="pins" class="transitions-enabled infinite-scroll clearfix">
  <%= render @posts %>
</div>

  <div class="pager">
    <%= render "page_nav", posts: @posts %>
  </div>

请确保将javascript include标记移到头部，以使jquery thurbolinks能够正常工作