我们可以在 ngx-masonry

问题描述

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

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

这是我的 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',{
    'image' : 'image4.jpg',{
    'image' : 'image5.jpg','width' : '50%'
  }
]

更新 ......

我已将代码更新为，

Ts

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

  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,]

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>

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

谢谢。

解决方法

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

org

简短说明：

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

编辑

我没有注意到您已经使用 % 将宽度设置为百分比值。在这种情况下，[style.width.%]="[item.width]" 的值就像一个没有任何单位的数字一样。

我试了一下，效果很好，即使没有 width 选项。

TS 代码：

percentPostition

HTML 代码（我还使用了引导程序中的 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' : 50,'width' : 25,] } 辅助类来使图像变成方形）：

ratio

结果：