如何将 Masonry 与 Isotope 结合起来，提供完全响应的解决方案 + 过滤和搜索

Question

我创建了以下代码：

http://codepen.io/dkpen/pen/dppoKj?editors=0110

这是完全响应；这是让同位素过滤与我实际的 Masonry 解决方案一起工作的变通解决方案；它可以通过 layout none 解决方案来完成，该解决方案可以在 Isotope 额外选项中找到，然后添加我原来的 Masonry 代码（上面笔 link 的 JS 部分的底部）。

问题是我过滤数据的时候好像在Masonry初始化的时候display:none没有加入到我实际的.boxdiv中，所以重新组织布局w / 过滤后的数据没有发生。你有什么想法我怎么能解决它？也许将我的砌体代码合并或放入同位素布局选项中？但是这个片段对我不起作用：

columnWidth: function( containerWidth ) {return containerWidth / 4;}

如果被问到，我使用的其他资源将通过评论部分提供。

+1 有趣的事：// 不定位项目的布局模式

Isotope.LayoutMode.create('none');

如果我将none更改为masonry动画不会再次开始播放，只是很好地过滤数据（但是，重组仍然不起作用）

Answer 1

完全正确，同位素是解决方案，因为它已经内置了砌体布局。谢谢大家！