Question

在更改现有报告的格式后，我注意到在过滤其中一个项目后，未正确触发砌体。示例如下：

http://relevantcodes.com/Tools/ReportUnit/res.html

请注意＆＃34;过滤器具 - ＆gt;传递＆＃34;无法正常工作，但所有其他过滤器都有效。当＆＃34;通过＆＃34;如果选择＆＃34;滤镜夹具＆＃34;，则项目垂直排列而不是预定义网格中。所有其他过滤器都能正常工作，也就是说，它们可以水平和垂直重新排列。

我已经尝试过一切，但似乎没有任何工作，这是一个非常奇怪的问题。

Answer 1

来自砖石文件：

1. If set to an Element or Selector String, Masonry will use the width of that element.
2. If columnWidth is not set, Masonry will use the outer width of the first element.

我刚刚在砌体容器中插入了一个尺寸调整项目，它就可以了。

<div class='container masonry'>
    <div class='sizer'>..</div>
    <div class='item'>..</div>
    <div class='item'>..</div>
</div>

.sizer { width: 49%; } // default

我的响应代码还有其他宽度，我用它来设置大小。

Answer 2

你有很多javascript，而且显示效果非常好，但有一件重要的事情我几乎可以保证你的问题。我需要复制和验证一些代码，但我强烈建议如下：

您的砌体方法使用显示/隐藏过滤器，该过滤器本身具有动画效果。这带来的挑战是，砌体会立即计算出放置物品的位置，但是显示/隐藏的动画需要花费一些时间才能完成。您剩下的就是基于运气的砌体方法，了解最终显示的结果。以下是我要考虑的几个选项：

从砖石转为同位素。它是相同的底层引擎，但它内置了过滤功能，完全消除了这个问题的复杂性。
延迟你的砌体调整，直到显示/隐藏完成后（我相信它默认为.5秒）。
为每个项目使用占位符div。这是一个有趣的，但想法是你在元素周围放置一个容器，它将显示/隐藏元素的宽度/高度的占位符。您将占位符div附加到砌体，因此当您显示/隐藏内部元素时，砌体仍然可以理解它应该是什么。它对用户是不可见的，因此它没有明显的区别。

无论如何，长话短说，我认为＃1是最好的方法。它可以为您节省大量的时间用于过滤。＃2是一种黑客，至少可以让你测试，看看问题是否与我的答案有关。如果您的网格具有随用户与其交互时更改大小的元素，则＃3是方便的信息。

希望有所帮助。

jQuery Masonry - 项目没有正确组织

2 个答案: