自动填充和调整给定容器中的卡片

Question

我有很多 Angular 垫卡，即不确定数量的带有不同尺寸图像的卡片。

我正在尝试实现的是根据容器自动填充和调整此类卡片，例如 this。

现在上面的例子使用了 4 列并且可以使用网格。

现在，我该如何用卡片实现它？我尝试使用 flex 但不知何故无法正确实现它。这是我毫无价值的尝试。

<div class="mat-card-container" style="
display: flex;
justify-content: center;    /* Add this */
flex-wrap: wrap;

">
<div class="mat-card-holder" style="
margin:0.6em;
width:220px;
" *ngFor="let art of arts.records">
    <mat-card class="art-card" >
      <mat-card-header>
        <mat-card-title>{{ art.TITLE }}</mat-card-title>
        <mat-card-subtitle>{{ art.AUTHOR }}</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="http://localhost/piwigo/{{ art.URL }}" alt="Photo of a Shiba Inu">
      <mat-card-content>
          {{art.TECHNIQUE}} / {{art.SCHOOL}} / {{art.FORM}} / {{art.TYPE}} / {{art.LOCATION}}
      </mat-card-content>
    </mat-card>
</div>
</div>

这给了我这么多，但仍有很多空白需要弥补。

这只是将它们按列排列，如何在容器中动态填充和调整它们？假设如果容器大小发生变化，卡片应该重新排列而不改变它们自己的 css 即尺寸。我的代码正确吗？我该如何填补两者之间的空白？

Answer 1

据我所知，您要实现的这种布局样式无法通过 css 本身实现。

在 javascript helper library, this is easily implemented. As you are using Angular, this is 的一些帮助下，Angular 对先前库的包装器将允许进行这样的设计。

从我的 phone 回复并且无法真正重现您的确切 ui，但在此处逐字复制他们的示例实现，

App.module.ts

import { MasonryModule } from '@thisissoon/angular-masonry';

const masonryProviders = [
  { provide: Masonry, useFactory: () => window['Masonry'] },
];

@NgModule({
  imports: [MasonryModule.forRoot(masonryProviders)],
})
export class AppModule {}

angular.json

"scripts": [
  "../node_modules/masonry-layout/dist/masonry.pkgd.js"
],

app.component.ts

export class AppComponent implements AfterViewInit, OnDestroy {
  @ViewChild('grid') public grid: ElementRef;

  public masonryInstance: MasonryInstance;

  public cards = cards;

  constructor(@Inject(Masonry) public masonry) {}

  ngAfterViewInit() {
    const options: MasonryOptions = {
      itemSelector: '.card',
      columnWidth: '.card',
      gutter: 20,
      fitWidth: true,
    };
    this.masonryInstance = new this.masonry(this.grid.nativeElement, options);
  }

  layout() {
    this.masonryInstance.layout();
  }

  ngOnDestroy() {
    this.masonryInstance.destroy();
  }
}

app.component.css

:host {
  display: block;
  margin-top: 1rem;
}

.grid {
  margin: 0 auto;
}

.card {
  display: inline-block;
  margin-bottom: 1rem;
  width: 18rem;
}

app.component.html

<div class="grid" #grid>
  <div class="card" *ngFor="let card of cards">
    <div class="card-body">
      <h5 class="card-title">{{ card.title }}</h5>
      <p class="card-text">{{ card.text }}</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

自动填充和调整给定容器中的卡片

Auto fill and adjust cards in given container

css

image-gallery

flexbox

css-grid