4

我正在使用 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 个图像。

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

4

2 回答 2

7

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

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

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

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

于 2013-08-02T12:56:06.647 回答
1

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

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

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

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

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

$myContainer.masonry();

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

于 2013-07-30T12:50:12.617 回答