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

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

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

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

所以我没有附加图片。 我正在更换容器。

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

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

然后使用，稍后调用布局（在我的情况下，单击按钮）

 $myContainer.masonry(); 

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