私はdivを追加するのではなく、レンダリングされた部分を追加して、Masonryに無限のスクロールを実装しようとしています。 divを追加すると、それはポールアイルランドの作品Infinite Scroll jQuery pluginとまったく同じです。私はそれを使用していましたが、代わりに部分的なものを追加したいので、私には役に立たないです。おそらく、混乱しているが、私はコードとの混乱をクリアしようとするでしょう：石積みの無限スクロール（部分的に追加）？ [Rails]
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
[email protected] 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部分を追加します。もちろんこれは、フリーメーソン（追加項目は、既存のものをオーバーラップでは動作しません
$('.postin').append('<%= j render @posts %>');
<% if @posts.next_page %>
$('.pagination').replaceWith('<%= j will_paginate @posts %>');
<% else %>
$(window).off('scroll');
$('.pagination').remove();
<% end %>
index.js.erb：これは私がフリーメーソンを実装する前に、無限スクロールコードが書かれた正確にどのようです）。今、私はこれをどのように機能させるのですか？
私が代わりにdiv要素の部分を追加する必要がありますなぜあなたは迷っている場合は、私は必ず実行にポストがロードされるたびに確認する必要があり_post.html.hamlの最後にスクリプトの一部を持っています。 （フル）
_post.html.haml_imageurl800.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 })}');
}
：
= 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": ""）に画像を読み込みます。私は私がはっきりしていることを望む全体的なことに取り組むためのよりよい方法があるなら、それを提案してください。ありがとう！