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

时间:2013-07-17 11:45:48

标签: jquery ruby-on-rails ajax jquery-masonry

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

然后ajax调用返回一个使用html()方法刷新div的js。现在完成后我正在呼叫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")) %>');

所以我没有附加图片。我要更换容器是准确的。 enter image description here

这实际上是相互加载了10张图像。

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

2 个答案:

答案 0 :(得分:6)

好吧,我好像已经解决了这个问题。

我使用:

获得了砌体对象
var masonry = $('#issue_container').data('masonry');

现在使用此方法我调用reloadItems()然后调用layout()。在第一个方法调用之后,每个项目在一个tile中相互重叠,然后在调用layout()之后形成一个漂亮的砌体布局。从左上角移动到漂亮布局的动画也很不错:D。

答案 1 :(得分:1)

我刚刚解决了类似的问题。我有一个在CSS中设置为{display: none}的外部div(包围砌体容器),然后在使用$('#...').show();后可见,我遇到了同样的问题。当div +容器首次可见时,所有元素都重叠。然后,当窗口重新调整大小时,它会正确重绘。

问题似乎是,首次创建元素时,div的大小为零(display:none设置的原因),以及何时显示Div(.show();)元素已经为零高度容器渲染。因此重叠。

我通过阻止布局初始化直到它变得可见来解决这个问题

$myContainer = $('#myTiles');
$myContainer.masonry({
    itemSelector: '.myTile',
    isInitLayout: false
});

然后使用

稍后调用布局(在我的情况下点击按钮)
$myContainer.masonry();

我检查了你的代码,并且无法使用你的css /脚本设置复制我这方面的问题......但我想我会分享我的解决方案以防万一。