jQuery的砌体装在彼此阿贾克斯DIV刷新后 [英] Jquery Masonry loading over each other after Ajax div refresh

问题描述

我用ajax刷新包含图像的股利。我用砖石最初添加布局。

I am using ajax to refresh a div containing images. I use masonry to add layout initially.

然后Ajax调用返回一个JS的刷新使用HTML（）方法的股利。现在，它完成我打电话砌筑（'reloadItems）后。但是砖石加载所有图片到彼此。一个页面后调整它的工作原理。我试图手动触发的页面调整大小，但它不使砖石进行调节。

Then the ajax call returns a js that refreshes the div using the html() method. Now after it completes I am calling masonry('reloadItems'). But masonry loads all images onto one another. After a page resize it works. I tried manually triggering the page resize but it doesnt make masonry make the adjustments.

记者：

$('#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请求的响应是：

OKay the response of this ajax request is:

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

所以，我不是附加的图像。我更换容器被precise。

So I am not appending the images. I am replacing the container to be precise.

这其实是对方装10张图片。

This is actually 10 images loaded on each other.

编辑：见<$c$c>http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495为CSS和HTML。

See http://stackoverflow.com/questions/17697223/masonry-images-overlapping-above-each-other/17697495?noredirect=1#17697495 for css and html.

推荐答案

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

Okay I seemed to have solved the problem.

我通过使用获得的砖石对象：

I obtained the masonry object by using:

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

现在用这个方法我称之为 reloadItems（）然后布局（）。第一个方法调用后的每个项目上互相重叠在一个区域再经过调用布局（）一个漂亮的砖石建筑的布局形成。从左上角移动到一个不错的布局的动画似乎也不错。：D

Now using this method I called reloadItems() and then layout(). After first method call every item overlaps onto each other in one tile and then after calling layout() a nice masonry layout is formed. The animation of moving from top-left corner into a nice layout also seems nice :D.

这篇关于jQuery的砌体装在彼此阿贾克斯DIV刷新后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！