Jquery Masonry 在 Ajax div 刷新后相互加载

我正在使用 ajax 刷新包含图像的 div。我最初使用砌体来添加布局。

然后ajax调用返回一个js，使用html()方法刷新div。现在完成后我正在调用 masonry('reloadItems') 。但是砌体会将所有图像相互加载。页面调整大小后它的工作原理。我尝试手动触发页面调整大小，但它不会使砌体进行调整。

JS:

$('#timerange-select, #category_select').bind('change', function() {
    form=$('#images-filter-form');
    $.get(form.action, form.serialize(),function(){
      var $container = $('#images_container');
      $container.imagesLoaded(function(){$container.masonry('reloadItems');});
      $(window).trigger('resize');
    }, 'script');
 });

好吧，这个ajax请求的响应是:

$('#images_container').html('<%= escape_javascript(render("shared/random_issues")) %>');

所以我不附加图像。准确地说，我正在更换容器。

这实际上是相互加载的 10 个图像。

编辑:有关 css 和 html 的信息，请参阅 http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495。

最佳答案

好吧，我似乎已经解决了这个问题。

我使用以下方法获得了砌体对象:

var masonry = $('#issue_container').data('masonry');

现在使用这种方法，我先调用 reloadItems() ，然后调用 layout() 。在第一个方法调用之后，每个项目在一个 tile 中相互重叠，然后在调用 layout() 之后形成一个漂亮的砖石布局。从左上角移动到漂亮布局的动画看起来也不错:D。

关于Jquery Masonry 在 Ajax div 刷新后相互加载，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17698922/