Flex、AngularJS + Masonry、akoenig/angular-deckgrid 等 [重复]

Question

我一直在发送这封电子邮件： 我即将发布一个用于 Web 应用程序安全的应用程序，它需要使用像 Masonry 这样的网格。我已经尝试了所有，每一个角度模块、指令和不同的方法，包括基于 CSS 的技术、纯 Vanilla JS，您的解决方案是在线可用的最佳选择之一。然而，我发现一个主要问题不仅会影响您的方法，还会影响每个 Angular 模块或插件。

问题 #1：

您的解决方案与任何其他解决方案一样，都是基于 angular 已经处理的信息数组。在您的示例中，它将是 source="photos"。现在，当有 2 组不同的元素时，问题就来了。让我们假设，我有一组先前在 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 内的内容应该是全部，受砌体布局的影响。当然，这是伪代码，我知道您的方法的 sintaxis 是不同的。但是，我在这里要表示的是，如果您能够应用像网格一样的砖石结构，包括首先已经存在于 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。它甚至可以是 2 个不同的参数：

<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 中制作这个网格需要做的工作。

Answer 1

实际上，我很想出去说flex-wrap: wrap 会解决这个问题。

.holder {
flex-wrap: wrap
-moz-columns: 2 auto;
box-sizing: border-box;
display: flex;
padding: 0 40px;
width: 100%;
}