问题标签 [angular-masonry]

简而言之，我想使用 Angular-masonry 指令（http://passy.github.io/angular-masonry/）实现的目标是这样的：http ://codepen.io/desandro/pen/htsui

我尝试了许多不同的方法，但更大的 div 只是在下一个 div 的顶部展开。

这是 HTML：

这是角度代码的片段：

这些样式只是用于测试：

吃完这一刻，div 正好在下一个 div 的顶部展开——我真的希望砖石做它的事情并重新排列其他 div。

我想在 Angular 2 应用程序中使用 Masonry Grid。

我安装了这个： http: //masonry.desandro.com/

和：npm install masonry-layout --save

我包括通过angular-cli.json

这也有效。

在应用程序中，如果我在 Web 浏览器中打开控制台并输入这段代码：

一切正常。

现在我想实现它自动工作。那我做了什么？

在我正在使用的组件中

ViewChild( @ViewChild('masonryGrid') masonryGrid: ElementRef;)

获取 div 并替换这行纯 javascript 行

var elem = document.querySelector('#masonry-grid');

现在我正在努力为 Masonry 创建typings.d.ts，而这部分对我来说还不是很清楚。

我尝试在组件顶部以这种方式声明变量。

然后在 ngAfterViewInit() 中执行此操作

一切都已编译，我在控制台中看不到任何错误，但 Masonry 没有实例化并且它不起作用。

任何形式的帮助将不胜感激。

编辑：

它开始起作用了。看来angular-cli webpack有问题。有时它不会自动识别更改。它在控制台中说“没有改变”。我重新启动服务器，它开始工作。

我正在为 iPad 优化移动应用程序（使用 angular1/ionic1 构建）并且遇到了问题。我正在尝试创建一个两列砌体效果，从左到右加载每个“卡片项目”（从网络请求返回）。我正在使用Angular-Masonry当我在实际的 iPad 上测试时，这似乎在本地运行得很好，但不是很好。我正在我的 iPad Mini 2（大约 3 岁）上进行测试，当应用程序首次加载时，大约一秒钟，所有从网络请求堆栈/重叠返回的图像在砌体效果开始之前相互重叠并按照我想要的方式对其进行格式化。该应用程序还使用离子无限滚动，因此当用户向下滚动时，会发出另一个网络请求，返回更多“卡片项目”。这些卡片项目在第一次呈现到页面时也会相互堆叠大约一秒钟。

我觉得这可能是一个性能问题。我认为这是因为 Angular Masonry 在本地运行良好，而且这种“重叠”错误仅在我在 iPad Mini 2 上进行测试时才会发生。

有没有人有使用 Angular-Masonry 和 Ionic Apps 的经验？几天来，我一直在努力解决这个问题，但无法确定到底出了什么问题。

你可以在这里看到我在其中包含 Angular-Masonry 指令“masonry”到包含 div 和“masonry-brick”到每个“card item”。

我想在桌面上显示 3 列砌体图像网格，在设备上显示单列。以下 plunk 在移动设备上工作，但在桌面上失败（两个图像之间有很多差距）。我试过以百分比设置宽度但没有运气

https://plnkr.co/edit/g75ClJU4VJWgJbfiKYdu?p=preview

提前致谢

斯隆

我正在尝试在 Angular 4 应用程序中集成具有无限滚动功能的砌体网格。

我将以下库 masonry.desandro.com用于砌体 并用于无限滚动：ngx-infinite-scroll

滚动时遇到问题，项目重叠。我不知道我是否没有正确初始化它。我感谢任何帮助，即使这意味着使用其他与 angular 4 一起工作的库。

我的代码如下所示：

*笨蛋

html:

我的组件：

我正在为 Angular 项目使用 angular2-masonry 插件，我需要在不更改其顺序的情况下显示媒体。angular2-masonry 插件没有可用的选项。那么有没有办法让它发生呢？

谢谢。

这个砌体网格必须考虑到不同的高度和宽度。关于如何做到这一点的任何提示？

这是我的项目应用程序模块 app.module.ts：

添加时出现以下错误： import { MasonryModule } from 'angular2-masonry'; 并将 MasonryModule 添加到导入

./node_modules/angular2-masonry/index.ts 中的错误模块构建失败：错误：/Users/developer/my-app/node_modules/angular2-masonry/index.ts 不是编译输出的一部分。有关详细信息，请查看其他错误消息。在 AngularCompilerPlugin.getCompiledFile (/Users/developer/my-app/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:625:23) 在 plugin.done.then (/Users/developer/my-app/node_modules/@ ngtools/webpack/src/loader.js:467:39) 在 process._tickCallback (internal/process/next_tick.js:109:7) @ ./src/app/app.module.ts 16:0-49 @ . /src/main.ts@multi webpack-dev-server/client? http://0.0.0.0:0 ./src/main.ts

关于这个问题的任何帮助

我正在使用angular2-masonry最新 Angular 版本（v5.1.3）的项目中工作，我一直在寻找 Masonry 和其他替代方案来在我的应用程序中实现。我尝试了多个，但我不喜欢实施。我尝试做一个原生 CSS 砌体，但我需要从左到右排序内容。

所以，问题是，在 Angular 中与 Masonry 有一个很好的集成方式吗？谢谢！

我无法为 ng-Masonry 设置选项：https ://www.npmjs.com/package/ng-masonry

我设置的选项都没有出现在 UI 中。有什么办法吗？