bbq/src/app/shared/components/masonry/index.en-US.md

order, title, type

order	title	type
50	masonry	Component

Based on masonry grid layout, DEMO.

Container structure

<div nz-row nzGutter="8" masonry [disabled]="masonryDisabled">
  <div
    class="masonry__sizer ant-col-md-12 ant-col-xl-6 position-absolute"
  ></div>
  <div
    *ngFor="let i of images; let idx=index"
    (click)="gallery.open(idx)"
    class="masonry__thm mb-sm"
    nz-col
    nzMd="12"
    nzXl="6"
  >
    <a class="img-thm img-thm__zoom-in">
      <i class="img-thm__mask"></i>
      <i class="img-thm__icon" nz-icon nzType="search"></i>
      <img
        class="img-thm__img"
        src="{{i.url}}"
        (load)="imgLoaded()"
        style="min-height: 150px"
      />
    </a>
  </div>
</div>

The masonry__ prefix class styles is required part.

API

Property	Description	Type	Default
[masonry]	Options	any	-
[disabled]	Whether to disable	boolean	false