Question

我正在尝试在砌体对象中使用带有filterrific结果的无限滚动。当照片重新加载时，它们会重新加载到单个文件中，但我希望结果填满整个页面，所以我不认为砌体正在重新加载无限卷轴。

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

我自己想出来了。我复制了Railscast＃114无尽页面http://railscasts.com/episodes/114-endless-page-revised中的一些代码。我包含了可能消除了分页代码的JS代码，但它没有用，我还必须制作一个CSS div。可能有一种DRYer方式。

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（如果你不偏袒，这将是index.html.haml）

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

fixes.css.scss

.hiding{
  display:none;
}

无限滚动与砌体和filterrific

1 个答案: