问题标签 [angular-masonry]

我一直在尝试使用角砌体。我一直在尝试做一些事情，例如将鼠标悬停在图像上时，图像会变暗，并且标题会在图像上更加暴露（高对比度）以便能够正确阅读。但是，当我尝试将鼠标悬停在图像上时，标题，或者在我的情况下我称之为标题，在我的图像中消失（或者显然也受到图像变暗的影响）。

要完全理解我的意思，请参阅StackBlitz 上的示例代码

我一直在尝试在纯 css 中执行此操作，以便在我的角度代码中只处理那些数据和屏幕转换（路由器链接）。我将样式留给 CSS 和其他库（即 Angular Masonry）

我正在使用 angular 并想创建一个砖石图像画廊。

我试图实现画廊，但我看不到图像。有谁知道他们为什么出现以及如何解决这个问题？

我是这种环境的新手，可能走错路了:(

堆栈闪电战

组件.html

预期结果

以下代码生成砌体布局：

现在的css代码：

因此，由于每个项目的宽度为 20%，因此连续显示五张图像。但现在我想在我的masonryItem类的 css 代码中包含一个边距属性

但是这样一排只有 4 个图像，并且在砌体网格的右侧有一些空间。那么如何在我的宽度计算中引入边距属性，以便每行显示五个图像？

我的解决方案：

添加一个带有 1rem 的边框属性：

如果背景颜色和边框颜色相同，它看起来像边距 1rem。那么每行的图像数量是相同的。

我必须在 Angular 9 中创建这个特定的布局。

我正在使用 ngx-masonry 包。( https://www.npmjs.com/package/ngx-masonry ) 创建这个特定的网格。

我的代码如下：对于 html 组件

对于 ts 组件

我得到的结果是：

我需要正确的砖石格式的图片。有人可以指导吗？

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

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

这是我的 HTML 代码：

TS代码：

更新 ..............

我已将代码更新为，

TS

HTML

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

谢谢。

我正在尝试ngx-masonry在我的JHipster应用程序（角度应用程序）中导入模块。

我跑

然后导入里面的模块app.module.ts

然后我在note.component.html文件中使用了组件：

我还尝试直接在我的内部导入模块note.component.ts：

但不断收到此错误：

我的 package.json 包括：

已经尝试停止服务器 npm，重新启动 IDE。

我在我的网站 ( https://mypleaks.com ) 上沿着 bootstrap 5 和 angular 13 新实现了砌体。

我从https://getbootstrap.com/docs/5.1/examples/masonry/引用了示例并添加了<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js" integrity="sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D" crossorigin="anonymous" async></script>

我已经动态创建了如下卡片：

不知何故，样式未在 myPleaks 上更新，类似于引导示例，请参阅下面的片段

引导示例

提前感谢您的帮助。