ionic image gallery

https://ionicacademy.com/ionic-image-gallery-responsive/

<ion-header>

  <ion-navbar>

    <ion-title>

      Image Gallery

    </ion-title>

  </ion-navbar>

</ion-header>

 

<ion-content padding>

  <ion-segment [(ngModel)]="galleryType" color="primary">

    <ion-segment-button value="regular">

      Regular

    </ion-segment-button>

    <ion-segment-button value="pinterest">

      Pinterest

    </ion-segment-button>

  </ion-segment>

 

  <div [ngSwitch]="galleryType">

    <!-- Responsive Layout with Ion Grid-->

    <ion-grid *ngSwitchCase="'regular'">

      <ion-row>

        <ion-col col-6 col-md-4 col-xl-3 *ngFor="let image of [1,2,3,4,5,6,7,8,9,10,11]">

          <div class="image-container" [style.background-image]="'url(assets/img/' + image + '.jpg)'"></div>

        </ion-col>

      </ion-row>

    </ion-grid>

 

 

    <!-- More Pinterest floating gallery style -->

 

  </div>

</ion-content>

css

page-home {

    .image-container {

        min-height: 200px;

        background-size: cover;

    }

}

ts file

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

 

@Component({

  selector: 'page-home',

  templateUrl: 'home.html'

})

export class HomePage {

  galleryType = 'regular';

  constructor(public navCtrl: NavController) { }

}