我正在使用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()
。在第一个方法调用之后,每个项目在一个图 block 中相互重叠,然后在调用layout()之后,形成一个漂亮的砖石布局。从左上角移动到漂亮布局的动画看起来也不错:D。
关于Ajax div 刷新后 Jquery Masonry 相互加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17698922/