Angular 6+应用程序的简单响应式砌体画廊组件 - ngx-masonry-gallery

Angular 6+应用程序的简单响应式砌体画廊组件 - ngx-masonry-gallery
插件名称 ngx-masonry-gallery
发布时间 2020年5月7日
插件作者 Enngage

一个适用于Angular 6+应用程序的简单响应式砌体画廊。

安装:

# NPM
$ npm install ngx-masonry-gallery --save

模块初始化:

import { NgModule } from '@angular/core';
import { MasonryGalleryModule } from 'ngx-masonry-gallery';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MasonryGalleryModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

用法:

<ngx-masonry-gallery [width]='250' [images]='images'></ngx-masonry-gallery>
import { IMasonryGalleryImage } from 'ngx-masonry-gallery';

export class AppComponent {

    private urls: string[] = [
        'https://www.ogttx.org/wp-content/themes/ogt/media/_frontend/img/bkg.jpg',
        'http://www.magicalkenya.com/wp-content/uploads/2014/08/homebannerimg4.jpg',
        'https://media.gadventures.com/media-server/cache/12/59/12591a5497a563245d0255824103842e.jpg',
        'https://i.pinimg.com/originals/1c/aa/c5/1caac55143e3e11461c6ae5962403deb.jpg',
        'http://littleguyintheeye.com/wp-content/uploads/2014/08/nature-3.jpg',
    ];

    public get images(): IMasonryGalleryImage[] {
        return this.urls.map(m => {
            imageUrl: m
    });
  }
}

属性:

属性 类型 描述
width number 列的宽度(以像素为单位)
gutter number 列之间的装订线大小(以像素为单位)
verticalGutter number 特定项目之间的装订线大小(以像素为单位)。可以与装订线结合以创建周围的装订线。
imageClasses string[] 添加到图像以自定义样式的类数组

方法:

方法 输入值 描述
addImages IMasonryGalleryImage [] 将给定图像添加到图库
removeImages IMasonryGalleryImage [] 从图库中删除选定的图像

事记:

事件 类型 描述
clickImage Output 单击图像时执行。IMasonryGalleryImage传递给事件。
layoutComplete Output 请参见layoutComplete。包含布局项目。
removeComplete Output 请参见removeComplete。包含已删除的项目。