如何在不改变结构的情况下动态添加内容到砖石布局网格？

Question

我正在做一个项目，使用一个砖石布局来显示一个高度可变的多个盒子的列表。但是在这个项目中，我使用了一个过滤器，当点击时，过滤器会根据一个类过滤所有的盒子，并隐藏没有该类的盒子。问题是，当我隐藏一些盒子时，整个布局的结构就会刹车，我不能简单地删除这些盒子，因为过滤器可能会被停用，所有的盒子又会出现，或者他的类参数也会改变，再次修改可见的盒子。这个，上面是我的盒子的结构。

<div class="masonry-root">
    <div class="masonry-cell">
        <div class="masonry-item">
        </div>
    </div>
    <div class="masonry-cell">
        <div class="masonry-item">
        </div>
    </div>
</div>

• 简单的隐藏元素并不奏效。
• 删除和隐藏元素，然后再次调用脚本也没有用。

Answer 1

如果有人遇到麻烦，我想有一个更好的方法来处理我的问题。使用 Mansory Dessanto 这款插件彻底解决了我的问题。代码的结构变得更简单了，你可以在网格上添加、隐藏和删除块，它将重新组织它。

<div class="grid">
    <div class="grid-item">
        <div class="content"></div>
    </div>
    <div class="grid-item">
        <div class="content gray"></div>
    </div>
    <div class="grid-item">
        <div class="content"></div>
    </div>
</div>

在这种结构下，我用一个函数就完成了所有的布局准备工作，就像这样。

// inicialize the plugin layout
$('.grid').masonry({
      // options
      itemSelector: '.grid-item'
});

// a simple event could trigger the next part
// hidding the selected element 
// (remove has the same efect but the elemnte would not appear again if 
// necessary)
$('.content.gray').hide();
// executing again the plugin 
$('.grid').masonry();