如何在不改变结构的情况下将内容动态添加到砌体布局网格？答案

【问题标题】：How do I add content dynamically to a masonry layout grid without changing the structure?如何在不改变结构的情况下将内容动态添加到砌体布局网格？
【发布时间】：2020-06-09 20:01:23
【问题描述】：

我正在开发一个项目，该项目使用砖石布局来显示具有可变高度的多个框的列表。但是在这个项目中，我使用了一个过滤器，当单击该过滤器时，它会过滤基于某个类的所有框，并隐藏没有该类的框。问题是当我隐藏一些框时，布局的整个结构会刹车，我不能简单地删除这些框，因为过滤器可以停用并且所有框再次出现，或者他的类参数也可以改变，再次修改可见框. 我使用的 Masonry 脚本和 CSS 是 this，上面是我用于盒子的结构：

<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>

简单地隐藏元素不起作用。
删除和隐藏元素，然后再次调用脚本也不起作用。

【问题讨论】：

标签： html css masonry

【解决方案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();

【讨论】：