Question

使用Jquery Masonry工作正常。但是我有小问题。布局如下：

<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在页面加载后初始化砌体后：

$('.container').masonry ( {        
    itemSelector: '.box'
});

我试图使用Ajax调用来替换其他一些盒子。在使用ajax之前：

$('.container').masonry( 'remove', $('.container .box'));

并在加载后：

$('.container').prepend(data).masonry( 'appended', data );

它加载所有新盒子并用砖石自动定位它，但它也在容器顶部留下了很大的间隙。新的盒子不是添加到容器的顶部，而是完全放在移除盒子结束的相同位置。我试图使用一些砌体函数，如reloadItems，布局等但没有任何帮助:( 有人知道我的问题的解决方案吗？

Answer 1

你正在混合两种相反的方法 - 前置和追加。似乎Masonry需要确切地知道你添加元素的方面。看看文档示例：

http://masonry.desandro.com/methods.html#prepended

首次点击时，我们只需尝试将您的代码更改为：

$('.container').prepend(data).masonry( 'prepended', data );

Answer 2

我刚遇到这个问题，我的解决方案是：

1删除原始项目。

2删除元素上的砖石功能。

3重新初始化元素上的砌体功能。

4然后使用prepend添加新项目。

//These were defined globally.
var masonryOptions = {
   columnWidth: 450,
   itemSelector: '.feature-block',
   gutter: 20
};

$grid = $('.masonry-grid').masonry(masonryOptions);

function clear() {
   $grid.masonry('remove', $grid.find('.feature-block'));
   $grid.masonry('destroy');
   $grid = $('.masonry-grid').masonry(masonryOptions);
}

JQuery Masonry不刷新容器高度

2 个答案: