无限滚动，具有砌筑和过滤效果

Question

I'm trying to use infinite scroll with filterrific results in a masonry object. When the photos reload, they reload in a single-file but I want the results to fill up the whole page, so I don't think the masonry is being reloaded with the infinite scroll.

profiles.js.coffee

$(window).on 'scroll', ->
  if $('.pagination').length
    @url = $('.pagination .next_page').attr('href')
    if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $('.pagination').remove()
      $('#filterrific_results').append('<div>')
      $('#filterrific_results div').last().load @url+' #filterrific_results', ->
          if $('.next_page.disabled').length
            $('.pagination').remove()

index.js.erb

<% js = escape_javascript(
  render(partial: 'profiles/list', locals: { profiles: @profiles })
) %>
$("#filterrific_results").html("<%= js %>");

<% if @profiles.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@profiles) %>');
<% else %>
$('.pagination').remove();
<% end %>

_list.html.haml

#filterrific_results
  %div
    = page_entries_info profiles
  %br
  .feed-jobs.feed-search{class: (profiles.any? && profiles.first.worker?) ? "feedgrid" : "feedlist"}
= render profiles
  = will_paginate profiles
:javascript
  $(function() {
    var $container;
    $container = $(".feedgrid");
    $container.imagesLoaded(function() {
      $container.masonry({
        itemSelector: ".item",
         columnWidth: 0,
        gutterWidth: 0
      }).masonry();
    });
  });

Answer 1

I figured this out on my own. I copied some of the code from Railscast #114 endless page http://railscasts.com/episodes/114-endless-page-revised . I included the JS code that supposedly eliminated the pagination code, but it didnt work, do I had to make a CSS div as well. There is probably a DRYer way for this.

index.js.erb

<% js = escape_javascript(render(partial: 'profiles/list', locals: { profiles: @profiles })) %>
$('#filterrific_results').append('<%= js %>');
  <% if @profiles.next_page %>
    $('.pagination').replaceWith('<%= j will_paginate(@profiles) %>');
  <% else %>
    $('.pagination').remove();
   <% end %>

_list.html.haml (this would be index.html.haml, if you don't partial out)

#filterrific_results
  %div.hiding
    = page_entries_info profiles
  %br
    = render profiles
  %div.hiding
    = will_paginate profiles

fixes.css.scss

.hiding{
  display:none;
}