jquery - masonry 无限滚动(通过附加部分)？ [ rails ]

Question

因此，我尝试通过附加渲染的部分(而不是附加 div)来实现 Masonry 的无限滚动。附加一个 div —— 这正是 Infinite Scroll jQuery plugin 的方式。保罗·爱尔兰的作品。我曾经使用过它，但现在它对我来说没有用，因为我想附加部分。您可能很困惑，但我会尝试用代码来消除困惑:

ma​​sonry.js

var $container = $('.postindex');

  $container.imagesLoaded(function (){

    $container.masonry({
      itemSelector: '.posts-wrapper',
      isFitWidth: true,
      percentPosition: true
    });
  });

分页.js

$( document ).ready(function() {

  if ($('#infinite-scrolling').size() > 0) {

    $(window).on('scroll', function() {
      var more_posts_url;
      more_posts_url = $('.pagination a.next_page').attr('href');
      if (more_posts_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
        $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..."/>');
        $.getScript(more_posts_url);
      }
    });
  }

});

index.html.haml

.postindex.transitions-enabled.infinite-scroll.page
  .postin
    -@posts.each do |post|
      = render 'posts/post', post: post
#infinite-scrolling
  = will_paginate @posts

_post.html.haml(摘录)

.posts-wrapper
  .post
    .image.center-block
      %a{id: "imageurl_#{post.id}", href: "/", "data-gallery": ""}
        = cl_image_tag(post.image.full_public_id, quality:"auto", fetch_format:"auto", width:640, crop: "scale", class: "img-responsive")

因此，在这种情况下，我不想附加 posts-wrapper div，而是附加整个 post 部分。这正是我实现 Masonry 之前无限滚动代码的编写方式:

index.js.erb

$('.postin').append('<%= j render @posts %>');
<% if @posts.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate @posts %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

这当然不适用于 Masonry(附加项目与现有项目重叠)。现在我该如何让它发挥作用？

<小时/>

如果您想知道为什么我需要附加部分而不是 div，我在 _post.html.haml 末尾有一段脚本，我需要确保它运行每次加载帖子时。这是完整的文件:

_post.html.haml(完整)

.posts-wrapper
  .post
    .image.center-block
      %a{id: "imageurl_#{post.id}", href: "/", "data-gallery": ""}
        = cl_image_tag(post.image.full_public_id, quality:"auto", fetch_format:"auto", width:640, crop: "scale", class: "img-responsive")


:javascript
  if ($(window).width() <= 800){
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript( render :partial => 'posts/imageurl800', :locals => {:post => post })}');
  }
  else if ($(window).width() <= 1200) {
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript( render :partial => 'posts/imageurl1200', :locals => {:post => post })}');
  }
  else if ($(window).width() <= 1600) {
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript( render :partial => 'posts/imageurl1600', :locals => {:post => post })}');  
  }
  else {
    $("#imageurl_#{post.id}").attr("href", '#{escape_javascript( render :partial => 'posts/imageurl1920', :locals => {:post => post })}');
  }

其中_imageurl800.html.haml是:

= cl_image_path(post.image.full_public_id, width:800, crop:"scale", class:"img-responsive")

和_imageurl1200.html.haml是:

= cl_image_path(post.image.full_public_id, width:1200, crop:"scale", class:"img-responsive")

等等。

基本上它的作用是，每次加载帖子时，它都会检查浏览器的宽度，并根据情况加载图库中的图像("data-gallery": "") 单击时会以特定尺寸显示。我希望我说清楚了。如果有更好的方法来解决整个问题，请提出建议。谢谢!

Answer 1

好的，几个小时后...

var $postbox = $('<%= j render @posts %>');
var $container = $('.postindex');

$postbox.imagesLoaded(function (){
$container.append.($postbox).masonry('appended', $postbox);    
});

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

这应该适合你。