0

当我尝试按百分比添加宽度时，它不起作用。它显示每行的图像。

有什么办法可以解决这个问题吗？

这是我的 HTML 代码：

<ngx-masonry [options]="options" [ordered]="true">
      <div ngxMasonryItem class="masonry-item" *ngFor="let item of gallery"  [style.width.%]="[item.width]">
        <a class="" href="/assets/images/gallery/{{item.image}}" data-fancybox="gallery">
          <img src="/assets/images/gallery/{{item.image}}" class="img-fluid" alt="">
        </a>
      </div>
</ngx-masonry>

TS代码：

public options: NgxMasonryOptions = {
    itemSelector: '.masonry-item',
    gutter: 10,
    resize: true,
};

public gallery = [
  {
    'image' : 'image1.jpg',
    'width' : '50%'
  },
 {
    'image' : 'image2.jpg',
    'width' : '25%'
  },
 {
    'image' : 'image3.jpg',
    'width' : '25%'
  },
 {
    'image' : 'image4.jpg',
    'width' : '50%'
  },
 {
    'image' : 'image5.jpg',
    'width' : '50%'
  }
]

在此处输入图像描述 更新 ..............

我已将代码更新为，

TS

public options: NgxMasonryOptions = {
    itemSelector: '.masonry-item',
    gutter: 0,
    resize: true,
  };

  public gallery = [
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 50,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    
  ]

HTML

<ngx-masonry [options]="options" [ordered]="true">
            <div ngxMasonryItem class="masonry-item ratio ratio-1x1" *ngFor="let item of gallery"  [style.width.%]="[item.width]">
                <img src="{{ item.image }}" style="width: 100%;">
            </div>
</ngx-masonry>

它不能正常工作.......................... ......................

谢谢。

4

1 回答 1

0

您应该将“width”属性转换为字符串，例如

'width' : '50%'

简短说明：

如果没有单位（例如%或rem），该值将被解释为基于像素的值，并且可以为其使用数字类型。但是当你想在值后面设置单位时（在这种情况下%）你必须把它写成字符串类型。

编辑

我错过了您已经将宽度设置为百分比值的观点[style.width.%]="[item.width]"。在这种情况下，for 的值可以width用作没有任何单位的数字。

我试过了，它工作得很好，即使没有percentPostition选项。

TS代码：

import { Component } from '@angular/core'
import { NgxMasonryOptions } from 'ngx-masonry'

@Component({
  selector: 'app-masonry',
  templateUrl: './app-masonry.component.html',
})
export class AppMasonryComponent {

  public options: NgxMasonryOptions = {
    itemSelector: '.masonry-item',
    gutter: 0,
    resize: true,
  }

  public gallery = [
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 50,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 25,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
    {
      'image' : 'https://images.unsplash.com/photo-1578133630261-a79a92922335?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=400&q=80&w=400',
      'width' : 12.5,
    },
  ]
}

HTML 代码（我还使用ratiobootstrap 中的辅助类来制作方形图像）：

<ngx-masonry [options]="options" [ordered]="true">
    <div ngxMasonryItem class="masonry-item ratio ratio-1x1" *ngFor="let item of gallery"  [style.width.%]="[item.width]">
        <img src="{{ item.image }}">
    </div>
</ngx-masonry>

结果： 在此处输入图像描述

于 2021-06-16T12:49:52.167 回答