砌体无限滚动（通过附加部分）？ [导轨]

Question

所以我试图通过附加一个渲染的部分来实现无限滚动到 Masonry，而不是附加一个 div。附加一个 div —— 这正是 Paul Irish 的 Infinite Scroll jQuery plugin 的工作原理。我曾经使用它，但现在它对我没有用，因为我想附加部分内容。您可能会感到困惑，但我会尝试用代码消除混乱：

ma​​sonry.js

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

  $container.imagesLoaded(function (){

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

pagination.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 %>

这应该适合你。

Answer 2

尝试了一种 DRY-er 方法，它解决了我的问题。我从部分中删除了脚本，而是创建了一个 js 函数来搜索和替换 URL 中的文本。比如：

_post.html.haml

%a{class: "post_url", href: "#{cl_image_path(post.image.full_public_id, width:640, crop:"scale", class:"img-responsive")}", "data-gallery": ""}

ma​​sonry.js

function urlhelper() {
  $("a.post_url").each(function(){
    var str = $(this).attr('href')
    if ($(window).width() <= 800) {
      var txt = str.replace("w_640","w_800");
    } else if ($(window).width() <= 1200) {
      var txt = str.replace("w_640","w_1200");
    } else if ($(window).width() <= 1600) {
      var txt = str.replace("w_640","w_1600");
    } else {
      var txt = str.replace("w_640","w_1920");
    }
    $(this).attr('href', txt);
  });
}

$( document ).ready(function() {
  urlhelper();
});

$( document ).ajaxComplete(function() {
  urlhelper();
});

这解决了我的问题，但我仍然想知道是否可以通过渲染局部来向砌体添加无限滚动。所以如果你知道这个问题的答案，不要犹豫，让我知道！

Answer 3

这可能会有所帮助：

http://masonry.desandro.com/methods.html#appended

虽然 jQuery 可以使用 .append() 添加 HTML 字符串，但 Masonry 的 appended 不能。使用 $.get() 或 $.ajax() 等 jQuery ajax 方法添加内容时，将 HTML 内容字符串包装在 jQuery 对象中以使用附加内容。

// does not work
$.get( 'page2', function( content ) {
  // HTML string added, but items not added to Masonry
  $grid.append( content ).masonry( 'appended', content );
});

// does work
$.get( 'page2', function( content ) {
  // wrap content in jQuery object
  var $content = $( content );
  // add jQuery object
  $grid.append( $content ).masonry( 'appended', $content );
});