Question

以this线程为例，我设法让无休止的滚动工作但不是很好。滚动不顺畅，不止一次显示新加载的帖子。这是我的所有代码：

帖子控制器：

@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()

帖/ 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 %>

然后我用这个包裹了视图：

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

Answer 1

将此添加到您的gem文件

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

运行bundle：install

应用程序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 %>

在_page_nav中我有

<%= will_paginate posts %>

在我的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正常工作

越野车无尽的滚动

1 个答案: