解决方法是使用CSS网格布局来保持图像对齐。 在p-galleria的CSS文件中,将其包装在一个带有网格属性的容器中。例如:
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
这将使图像始终按列对齐,并根据大小动态调整大小。 在包含p-galleria的p-dataview组件中,将其容器DIV的类名称更改为gallery-container即可。
<p-dataview [value]="data" filterBy="category" filterMode="strict">
<ng-template let-item pTemplate="listItem">
<div class="gallery-container">
<p-galleria [images]="item.images"></p-galleria>
</div>
</ng-template>
</p-dataview>