jQuery 砌体 - 项目未正确组织

jQuery Masonry - items not correctly organized

更改现有报告的格式后,我注意到在过滤其中一项后,砌体未正确烧制。示例如下:

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

请注意,"Filter Fixtures -> Passed" 无法正常工作,但所有其他过滤器都可以工作。当为 "Filter Fixtures" 选择 "Passed" 时,项目将垂直排列,而不是在预定义的网格中排列。所有其他过滤器都可以正常工作,也就是说,它们在水平和垂直方向都重新排列。

我已经尝试了所有方法,但似乎没有任何效果,这是一个非常奇怪的问题。

您有很多 javascript,并且显示效果非常好,但我几乎可以保证一件大事是您的问题。我复制和验证的代码有点多,但我强烈建议如下:

您的砌体方法使用 show/hide 滤镜,它本身是动画的。这带来的挑战是砌体会立即计算将东西放在哪里,但 show/hide 的动画需要一些时间才能完成。你剩下的是一种基于运气的砌体方法,知道结果显示将是什么。以下是我会考虑的几个选项:

  1. 从砖石建筑转向同位素建筑。它是相同的底层引擎,但它内置了过滤功能,可以完全消除问题的复杂性。
  2. 将砌体调整延迟到 show/hide 完成后(我相信默认情况下是 0.5 秒)。
  3. 为每个项目使用占位符 div。这个很有趣,但想法是在元素周围放置一个容器,该容器将 show/hide 用作元素 width/height 的占位符。你将占位符 div 附加到砌体上,这样当你 show/hide 你的内部元素时,砌体仍然理解它应该是什么。它对用户是不可见的,因此没有明显的区别。

总之,长话短说,我认为#1 是最好的方法。如果将其用于过滤,将会为您节省大量的开发时间。 #2 是一种 hack,至少可以让您测试问题是否与我的答案有关。 #3 如果你有一个网格,其中的元素在用户与它们交互时会改变大小,那么这是方便的信息。

希望对您有所帮助。

来自砌体文档:

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

我的响应式代码有其他宽度,我用它来设置尺寸。