Question

我在项目中使用Masonry-js，但仅显示一个列。我尝试了NgxMasonry插件，它确实可以工作，但是构建网格的时间太长。

.ts

import Masonry from 'masonry-layout'

ngAfterViewInit() {
    var elem = document.querySelector('.masonry');
    var msnry = new Masonry( elem, {
        // options
        itemSelector: '.eventItem',
        columnWidth: 180
    });
}

.html

<div class="masonry">
    <div class="eventItem" *ngFor="let item of eventsList"
        /...
    </div>
</div>

.scss

.masonry{
    width: 100%;

    .eventItem{
        width: 48%;
    }
}

Answer 1

你好，我遇到了同样的问题，我已经设法使其正常工作了，这是我的配置

.ts

public masonryOptions: NgxMasonryOptions = {
    transitionDuration: '0.2s',
    gutter: 15,
    resize: true,
    initLayout: true,
    columnWidth: '.masonry-item',
    percentPosition: true
  };

.scss

/*-- Masonry --*/
ngx-masonry {
  margin: 0 auto;
}

.masonry-item {
  margin-bottom: 15px;
  background-size: cover;
  width: 47.5%;
}

.htm

    <ngx-masonry style="margin-left: 15px; margin-right: 15px" [options]="masonryOptions" [useImagesLoaded]="true">
            <ng-container *ngFor="let item of dataMarket; index as i">
              <ngxMasonryItem *ngIf="!item?.is_primary" class="masonry-item">
                <ion-card routerLink="index" (click)="select(item.id)" no-margin>
                  <img [src]="item?.avatar ? item.avatar : STR_VAR.EMPTY_IMG_ORG">
                  <div class="m-1">
                    <ion-row>
                      <ion-col size="9" no-padding>
                        <p class="font-size-14 my-1">{{ item?.name }}</p>
                      </ion-col>
                      <ion-col size="3" no-padding text-center>
                        <ion-img [src]="item?.medal" class="p-2" *ngIf="item?.medal"></ion-img>
                      </ion-col>
                    </ion-row>
                    <p class="font-size-13 my-1">{{ item?.star_doctor ? item.star_doctor.first_name : item.owner.first_name }}</p>
                    <p class="my-1"><ion-icon name="pin"></ion-icon> {{ item?.distance | number: '1.0-2' }}km</p>
                    <app-ranking-star [initialStars]="item.score"></app-ranking-star>
                    <div>
                      <ion-badge class="mr-1" *ngFor="let tag of item.tags;index as i">item {{i}}</ion-badge>
                    </div>
                  </div>
                </ion-card>
              </ngxMasonryItem>
            </ng-container>
          </ngx-masonry>

希望对您有帮助

石工js仅在Ionic 4中显示单列

1 个答案: