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

Question

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

masonry.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 的时间。这是完整的文件：

_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")

等等。

基本上它所做的是，每次加载 post 时，它都会检查浏览器的宽度，并根据它加载图库中的图像 ("data-gallery": "")单击时的特定大小。我希望我很清楚。如果有更好的方法来解决整个问题，请提出建议。谢谢！

Answer 1

尝试了一种 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": ""}

masonry.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 2

这可能有帮助：

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

While jQuery can add an HTML string with .append(), Masonry's appended cannot. When adding content with jQuery ajax methods like $.get() or $.ajax(), wrap HTML content string in a jQuery object to use it with appended.

// 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 );
});

Answer 3

好的，几个小时后...

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

这应该适合你。

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

Masonry infinite scrolling (by appending partial)? [Rails]

jquery

ruby-on-rails

infinite-scroll

jquery-masonry

masonry