Question

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

masonry.js

$scope.submit = function(username){
    alert(username) 
  }

pagination.js

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

  $container.imagesLoaded(function (){

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

index.html.haml

$( 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);
      }
    });
  }

});

_post.html.haml （摘录）

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

因此，在这种情况下，我不想附加.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") div，而是追加整个posts-wrapper部分。这正是我在实施Masonry之前编写无限滚动代码的原因：

index.js.erb的

post

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

如果您想知道为什么我需要附加部分而不是div，我在$('.postin').append('<%= j render @posts %>'); <% if @posts.next_page %> $('.pagination').replaceWith('<%= j will_paginate @posts %>'); <% else %> $(window).off('scroll'); $('.pagination').remove(); <% end %>末尾有一段脚本，我需要确保每次帖子都是加载。这是完整的文件：

_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")）中的图像点击时。我希望我清楚。如果有更好的方法来解决整个问题，那么请建议。谢谢！

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

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

<强> _post.html.haml

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

<强> masonry.js

package sso.client;
import java.security.Principal;
import org.springframework.boot.autoconfigure.EnableAutoConfiguration;
import org.springframework.boot.autoconfigure.security.oauth2.client.EnableOAuth2Sso;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@EnableAutoConfiguration
@Configuration
@EnableOAuth2Sso
@RestController
public class App {

  @RequestMapping("/")
  public String home(Principal user) {
    return "Hello " + user.getName();
  }

  public static void main(String[] args) {
    new SpringApplicationBuilder(App.class)
        .properties("spring.config.name=client").run(args);
  }

}

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

Answer 3

这可能会有所帮助：

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

虽然jQuery可以使用.append（）添加HTML字符串，但是附加的Mason不能。使用jQuery ajax方法（如$ .get（）或$ .ajax（））添加内容时，请在jQuery对象中包装HTML内容字符串，以便在附加时使用它。

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

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

3 个答案: