在图片库中使用虚拟滚动

Question

我正在尝试在我的图片库中实现虚拟滚动。我的问题是实施不能正常工作。首先，元素显示在垂直位置，而实际上它们应该尊重水平断点，然后才尊重垂直滚动。二、滚动元素间距大

有谁知道我该如何解决这个问题？谢谢

HTML

<div [ngSwitch]="viewMode" style="height:100%; width:100%">
  <div id="tab2" *ngSwitchCase="'tab2'" style="height:100%; width:100%">
    <div
      style="margin-left: 16px; margin-right: 16px;height:100%; width:100%"
      class="first"
    >
      <ng-container
        *ngIf="
          arrayDeNomesCategorias.length == 0 ||
          arrayDeNomesCategorias == undefined
        "
      >
        <ul
          class="mdc-image-list my-image-list"
          style="height:100%; width:100%"
        >
          <cdk-virtual-scroll-viewport
            itemSize="50"
            style="height:100%; width:100%"
          >
            <ng-container *cdkVirtualFor="let i of images; let j = index">
              <li class="mdc-image-list__item">
                <div class="mdc-image-list__image-aspect-container">
                  <img
                    src="https://material-components-web.appspot.com/images/photos/3x2/{{
                      i + 1
                    }}.jpg"
                    class="mdc-image-list__image"
                  />
                </div>
              </li>
            </ng-container>
          </cdk-virtual-scroll-viewport>
        </ul>
      </ng-container>
    </div>
  </div>
</div>

问题

正确，但没有实现滚动:(

Answer 1

我更新了你的例子 here。

您的问题主要是 css 并且似乎（至少）有 2 个问题：

您正在给予 .mdc-image-list__item class min-height: 400px 和 max-height: 400px。这基本上意味着你所有的 .mdc-image-list__item 容器都有 400px 的高度（所以 height: auto 有点没用）。删除它会删除图像之间的白色 space。
如果您想在同一页面上同时滚动和放置元素，您应该使用 flex-wrap: wrap.
的弹性容器

为了做到这一点，我使用了以下代码片段（针对您的情况）：

:host ::ng-deep .cdk-virtual-scroll-content-wrapper {
  display: flex;
  flex-wrap: wrap;
}

您可以阅读有关主机的更多信息，建议使用 ng-deep here. But please be aware that according to this article (and not only) 以避免在最新版本的 angular 中使用它。为了简单起见，我在您的示例中使用了它，但您可能希望在生产中避免使用它。

(extra) ：作为一个小的改进，我还从 .mdc-image-list__item 媒体查询中删除了重复的 margin: 10px; height: auto; max-height: 400px; 属性（并且只留下没有媒体查询的初始属性）。它无论如何都会被应用，因为没有任何东西可以覆盖它，只需更改媒体查询上的 with 就足够了。

在图片库中使用虚拟滚动

Use Virtual Scroll in image gallery

html

css

typescript

angular-material

angular