Flex，AngularJS +砌体，akoenig /角甲板格栅等 [英] Flex, AngularJS + Masonry, akoenig/angular-deckgrid and more

问题描述

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

问题1： / p>

与任何其他解决方案一样，您的解决方案基于已由angular处理的信息数组。在你的例子中，它将是source =photos。现在，问题出现时有两个不同的元素组。让我们假设，我有一组元素，之前在DOM中定义。换句话说：

 < div angular-grid> 
< p class =angular-grid-elem>此内容已从这里开始，在DOM中，直接在HTML中，我想对它应用一个Masonry样式。 / p> 
< div class =angular-grid-elemstyle =height：500px>与此内容相同。< / div& 
<！ - 这里有更多的内容，从信息数组加载 - > 
< div class =angular-grid-elemng-repeat =data in data_array> 
< p> {{data.header}}< / p> 
< p> {{data.details}}< / p> 
< / div> 
< / div> 
  

现在，您可以在示例中看到，主div内的内容应该全部，受砖石布局的影响。当然，这是伪代码，我知道你的方法的sintaxis是不同的。但是我想在这里代表的是，你的模块，会更好，如果你能够应用像砖结构网格​​，包括已经存在于DOM / HTML中的元素，首先，元素

有第二个问题我发现在多个角度模块和方法。如果我有2，3或让我们说甚至16个div，所有，都表现出同样的砖石般的行为会发生什么？我不得不承认，我没有尝试它与您的模块，因为我不能解决的初始问题，需要正确处理的元素的组合，（1）在HTML中预定义，和（2 ）来自和ng-repeat函数。

一种可能的方法：

为了解决第二个问题和第一个问题，同时，我认为最好的方法可能是使用元素类和元素ids来处理这种情况？为什么？因为它可以容易地应用到DOM中已经存在的元素中，以及通过使用ng重复或任何其他角度函数动态地加入或离开的元素。

这里是我说的例子：

 < div class = angular-grid-dad-oneng-grid ={'dad'：'angular-grid-dad-one'，'childs'：'angular-grid-elem'}& 
< p class =angular-grid-elem>此内容已从这里开始，在DOM中，直接在HTML中，我想对它应用一个Masonry样式。 / p> 
< div class =angular-grid-elemstyle =height：500px>与此内容相同。< / div& 
<！ - 这里有更多的内容，从信息数组加载 - > 
< div class =angular-grid-elemng-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_01ng-grid ={'dad'：' seccion_01'，'childs'：'seccion_01_child'}ng-show =seccion =='1'> 
< p class =seccion_01_child>此内容已经从头开始，在DOM中，直接在HTML中，我想对其应用Masonry样式。< / p& 
< div class =seccion_01_childstyle =height：500px>与此内容相同。< / div> 
<！ - 这里有更多的内容，从信息数组加载 - > 
< div class =seccion_01_childng-repeat =data in data_array> 
< p> {{data.header}}< / p> 
< p> {{data.details}}< / p> 
< / div> 
< / div> 
 
< div class =another_containerng-grid ={'dad'：'another_container'，'childs'：'child_of_container'}ng-show =seccion ==' > 
< p class =child_of_container>此内容已经从头开始，在DOM中，直接在HTML中，我想对它应用Masonry样式。< / p> 
< div class =child_of_containerstyle =height：500px>与此内容相同。< / div> 
<！ - 这里有更多的内容，从信息数组加载 - > 
< div class =child_of_containerng-repeat =data in data_array> 
< p> {{data.header}}< / p> 
< p> {{data.details}}< / p> 
< / div> 
< / div> 
 
< div class =redundant_exampleng-grid ={'dad'：'redundant_example'，'childs'：'childs_of_redundancy'}ng-show =seccion ==' > 
< p class =childs_of_redundancy>此内容已从这里开始，在DOM中，直接在HTML中，我想对其应用Masonry样式。< / p> 
< div class =childs_of_redundancystyle =height：500px>与此内容相同。< / div> 
<！ - 这里有更多的内容，从信息数组加载 - > 
< div class =childs_of_redundancyng-repeat =data in data_array> 
< p> {{data.header}}< / p> 
< p> {{data.details}}< / p> 
< / div> 
< / div> 
 

我在ng-grid值中使用了一个Json样式的指令，以解释我的观点，但是它不是真的必须是Json。它甚至可以是两个不同的参数：

 < div class =dadng-grid-dad =dadng -grid-childs =childsng-show =seccion =='3'> 
< p class =childs>此内容已经从头开始，在DOM中，直接在HTML中，我想对它应用Masonry样式。< / p& 
< div class =childsstyle =height：500px>与此内容相同。< / div> 
<！ - 这里有更多的内容，从信息数组加载 - > 
< div class =childsng-repeat =data in data_array> 
< p> {{data.header}}< / p> 
< p> {{data.details}}< / p> 
< / div> 
< / div> 
  

此外，关于您创建的无限滚动，您将能够加载更多元素，触发无限滚动，并且只从一个特定数组加载元素。
请让我知道如果我可以帮助进一步，我想将您的模块集成到我的应用程序。

让我们希望通过下一个实现HTML和CSS我们有这种情况完全由下一代浏览器控制，我知道在Javascript中使这个网格所需的工作。

解决方案

实际上，我会出去一个肢体，说 flex-wrap：wrap 会解决这个问题。

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

I've been sending this emails: I'm about to release an application for web application security which requires the use of a grid like Masonry. I've tried all, and every single angular module, directives, and different approaches, including CSS based techniques, pure Vanilla JS, and your solution is, one of the best options available online. I found, however a main issue, that affects not only your approach, but every single Angular module or addon.

Issue #1:

Your solution, as any other solution, is based on an array of information that is already handled by angular. In your example case, it would be source="photos". Now, the problem comes when there's 2 different groups of elements. Let's assume, that I have a group of elements that where previously defined in the DOM. In other words:

<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>

Now, as you can see in the example, the content inside the main div, , should be all, affected by the masonry layout. Of course, this is pseudo code and I'm aware that the sintaxis of your approach is different. However what I'm trying to represent here, is that your module, would be way better, if you would be able to apply the masonry like grid, including elements which are already present in the DOM/HTML in first place, with elements that are coming from an array.

Issue #2:

There's a second issue I found in multiple angular modules and approaches. What happens if I have 2, 3 or let's say even 16 divs which all of them, present the same masonry like behaviour? I have to admit, I didn't try it with your module, as I couldn't solve the initial problem, that requires the proper handling of the combination of elements that are (1) pre-defined in the HTML, and (2) coming from and ng-repeat function.

A possible approach:

In order to solve the second problem and the first one, at the same time, I have thought that the best approach might be to make use of element classes and elements ids to handle the situation? Why? Because it can easily applied into elements that are already there in the DOM in first place, as well, to elements that are joining or leaving dynamically by the use of a ng-repeat or any other of the angular functions.

Here's an example of what I'm saying:

<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>

In this case, the main div defines itself as id="angular-grid-dad-one", And also tells the Angular module, that the element angular-grid-dad-one is a container div of a masonry like structure, And that it's childs are marked as angular-grid-elem. As we could see on this line. ng-grid="{'dad': 'angular-grid-dad-one', 'childs': 'angular-grid-elem'}"

This way, it allow us to make use of the Angular module in multiple instances. For example.

<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>

I have used a Json styled instruction in the ng-grid value in order to explain my point, but it doesn't really have to be Json. It even could be 2 different paramenters:

<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>

As well, regarding the infinite scroll that you have created, you would be able to load more elements, triggering the infinite scroll, and loading only elements from one specific array, of course. Please let me know if I can help further, I would like to integrate your module into my application.

And let's hope that by the next implementation of HTML and CSS we have this situation fully under control by the next generation of browsers, I'm aware of the work it takes to make this grids in Javascript.

解决方案

Actually, I am gonna go out on a limb and say that flex-wrap: wrap will fix the issue.

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

这篇关于Flex，AngularJS +砌体，akoenig /角甲板格栅等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！