Question

我正在使用Isotope（使用Packery）在我的网站上创建一些奇特的响应式网格。使用jQuery我试图获取第一行中的所有元素并给它们一些样式：

C:\Users\owrasa\AppData\Local\Enthought\Canopy\User\Scripts\python.exe C:/Users/owrasa/PycharmProjects/den/layerstack.py
Using example data from C:/Users/owrasa/PycharmProjects/den\..\data\
 and saving results in C:/Users/owrasa/PycharmProjects/den\..\output\
Traceback (most recent call last):
  File "C:/Users/owrasa/PycharmProjects/den/layerstack.py", line 3, in <module>
    from imagine import modeler
  File "C:\Program Files\Intergraph\ERDAS IMAGINE 2014\usr\lib\Win32Release\python\imagine\__init__.py", line 19, in <module>
    import init
  File "C:\Program Files\Intergraph\ERDAS IMAGINE 2014\usr\lib\Win32Release\python\imagine\init\__init__.py", line 56, in <module>
    _initToolkit();
  File "C:\Program Files\Intergraph\ERDAS IMAGINE 2014\usr\lib\Win32Release\python\imagine\init\__init__.py", line 51, in _initToolkit
    import _init
ImportError: DLL load failed: %1 is not a valid Win32 application.

Process finished with exit code 1

在大屏幕上，连续有两个网格元素。在小屏幕上只有一个。为了使我的脚本响应，我在脚本周围添加了$('.grid .grid-item').filter(function() { return $(this).css('top') == '0px'; }).css("opacity", "0.5");。

$windows.on('resize')

脚本工作得很好，但如果我调整屏幕大小以获得小版本（网格项目的宽度为100％），则第二个网格项仍然具有css属性。有没有办法摆脱调整大小的CSS风格？

Check it out (and resize the screen)!

Answer 1

您实施的方法存在的问题是Isotope需要时间来重新定位每个()，因此当您检查顶部为0的项目时，它们可能尚未完成移动到最终位置。

此外，你不是重置项目的不透明度，所以一旦一个项目被赋予它不会改变的样式。

最后，resize事件在调整大小期间被多次调用，并且应该被去抖动以仅在resize事件停止后实际执行更改。类似的东西：

.grid-item

https://codepen.io/anon/pen/oYMKRj

所以，即使有上述修正，你仍然很难确定哪个var debouncer; $(window).on('resize', function(){ clearTimeout(debouncer); debouncer=setTimeout(function(){ $('.grid .grid-item').css("opacity", "1").filter(function() { return $(this).css('top') == '0px'; }).css("opacity", "0.5"); },200); });位于顶部，除非等待Isotope完成其动画（这是我们如何解决的线索）此）...

那么怎么样？

幸运的是，Isotope和Packery有自己的自定义事件，您可以倾听。因此，除了上述内容之外，您还可以在布局完成时监听触发的.grid-item事件（正如您所料） ...

layoutComplete

https://codepen.io/anon/pen/vyzBYy

在windows.resize上切换类

1 个答案:

那么怎么样？