我一直在发送此电子邮件：
我即将发布一个用于 Web 应用程序安全的应用程序，它需要使用像 Masonry 这样的网格。我已经尝试过所有的、每一个角度模块、指令和不同的方法，包括基于 CSS 的技术、纯 Vanilla JS，而你的解决方案是在线可用的最佳选项之一。然而，我发现一个主要问题，它不仅影响你的方法，而且影响每一个 Angular 模块或插件。
问题#1：
与任何其他解决方案一样，您的解决方案基于已由 Angular 处理的一系列信息。在您的示例中，它将是 source="photos"。现在，当有两组不同的元素时，问题就出现了。假设我有一组先前在 DOM 中定义的元素。换句话说：
<div angular-grid>
<p class="angular-grid-elem">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="angular-grid-elem" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="angular-grid-elem" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
现在，正如您在示例中看到的，主 div 内的内容应该是全部，受砌体布局的影响。当然，这是伪代码，我知道您的方法的语法是不同的。然而，我在这里试图表示的是，如果您能够应用像网格这样的砌体，包括首先已经存在于 DOM/HTML 中的元素，那么您的模块会更好来自数组。
问题#2：
我在多个角度模块和方法中发现了第二个问题。如果我有 2、3 个甚至 16 个 div，它们都呈现相同的砖石行为，会发生什么？我必须承认，我没有尝试使用您的模块，因为我无法解决最初的问题，这需要正确处理以下元素的组合：(1) 在 HTML 中预定义，以及 (2 ) 来自 ng-repeat 函数。
一种可能的方法：
为了解决第二个问题和第一个问题，我同时想到最好的方法可能是利用元素类和元素id来处理这种情况？为什么？因为它可以轻松地应用于 DOM 中已经存在的元素，也可以应用于通过使用 ng-repeat 或任何其他角度函数动态加入或离开的元素。
这是我所说的一个例子：
<div class="angular-grid-dad-one" ng-grid="{'dad': 'angular-grid-dad-one', 'childs': 'angular-grid-elem'}" >
<p class="angular-grid-elem">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="angular-grid-elem" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="angular-grid-elem" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
在这种情况下，主 div 将自身定义为 id="angular-grid-dad-one"，
并且还告诉 Angular 模块，元素 angular-grid-dad-one 是一个类似砖石结构的容器 div，
它的孩子被标记为 Angular-Grid-Elem。
正如我们在这条线上看到的。
ng-grid="{'dad': 'angular-grid-dad-one', 'childs': 'angular-grid-elem'}"
这样，我们就可以在多个实例中使用 Angular 模块。例如。
<div class="seccion_01" ng-grid="{'dad': 'seccion_01', 'childs': 'seccion_01_child'}" ng-show="seccion == '1'">
<p class="seccion_01_child">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="seccion_01_child" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="seccion_01_child" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
<div class="another_container" ng-grid="{'dad': 'another_container', 'childs': 'child_of_container'}" ng-show="seccion == '2'">
<p class="child_of_container">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="child_of_container" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="child_of_container" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
<div class="redundant_example" ng-grid="{'dad': 'redundant_example', 'childs': 'childs_of_redundancy'}" ng-show="seccion == '3'">
<p class="childs_of_redundancy">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="childs_of_redundancy" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="childs_of_redundancy" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
我在 ng-grid 值中使用了 Json 风格的指令来解释我的观点，但它不一定是 Json。它甚至可以是两个不同的参数：
<div class="dad" ng-grid-dad="dad" ng-grid-childs="childs" ng-show="seccion == '3'">
<p class="childs">This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.</p>
<div class="childs" style="height:500px">Same happens with this content.</div>
<!-- and here comes more content, which is loaded from an array of information -->
<div class="childs" ng-repeat="data in data_array">
<p>{{data.header}}</p>
<p>{{data.details}}</p>
</div>
</div>
此外，对于您创建的无限滚动，您当然可以加载更多元素，触发无限滚动，并仅加载一个特定数组中的元素。
如果我可以进一步提供帮助，请告诉我，我想将您的模块集成到我的应用程序中。
希望通过 HTML 和 CSS 的下一个实现，下一代浏览器能够完全控制这种情况，我知道用 Javascript 制作这个网格需要做的工作。
