Masonry js 仅在 Ionic 4 中显示单列答案

【问题标题】：Masonry js only show single column in Ionic 4Masonry js 仅在 Ionic 4 中显示单列
【发布时间】：2019-05-31 12:28:57
【问题描述】：

我在我的项目中使用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%;
    }
}

【问题讨论】：

标签： angular ionic4 masonry

【解决方案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>

希望对你有帮助

【讨论】：