使用 AngularJS (ng-repeat) 的 Susy 画廊 - 不填补 ng-hide 的空白

Question

我正在使用 Susy 的图库工具以网格格式显示元素。 Angular 会根据用户的选择即时隐藏或显示这些网格元素。当 Angular 在网格中隐藏一个元素时，它会为它附加一个 ng-hide 类。这又将其 CSS 设置为 display:none !important。

问题在于 Susy 正在计算每个元素的位置，而不考虑设置为 display:none 的项目 - 当这些元素被隐藏时，它会在网格中留下空隙。

是否可以让 Susy 在布置隐藏元素时忽略？

我尝试使用:not() CSS 选择器，但没有成功 - 布局中仍然存在差距：

.results__result:not(.ng-hide) {
    @include gallery(3 of 12);
}

Answer 1

Sass 对 DOM 一无所知，所以 Susy 也不知道。要创建画廊布局，susy 必须依赖nth-child 选择器——这对于您正在谈论的用例来说效果不佳。从简单开始：

.results__result {
  @include span(3 of 12);
}

如果您使用的是split、inside 或inside-static 排水沟——应该可以。否则，您需要某种方法来定位网格每一行中的 last 元素。 CSS 没有办法定位 nth-visible，因此这需要在您的标记/js 中添加逻辑。每 4 个可见结果给定一个 last 类，您可以添加：

.last {
  @include last;
}