Układ Pinterest z materiałem kątowym

Question

Potrzebuję następującego układu dla Angular Material, gdy karty są wstawiane od lewej do prawej, zawijanie na końcu dostępnej szerokości i wypełnienie pionowej przestrzeni między kartami. Wszystkie karty mają taką samą szerokość, ale różne wysokości:

to możliwe ze zwykły kątowe i CSS? W jaki sposób?

---

starałem się tego dokonać z display:flex ale nie mogłem pozbyć pionowej przestrzeni:

.cards { 
     display: flex; 
     justify-content: flex-start; 
     flex-wrap: wrap; 
} 

---

Znalazłem również czystego roztworu CSS, który rozwiązuje problem z przestrzenią, ale ma inną kolejność i wymaga stałej wysokości: https://codepen.io/michellebarker/pen/zvxpoG

---

Aktualizacja

Wymagania dodatkowe:

• Responsive układ: w zależności od okna z, istnieje mniej lub więcej kolumn; ale zawsze wypełnić całą dostępną przestrzeń (Adaptive szerokość kolumny, na przykład 100%, 50% itp)
• Umieszczenie kart musi pracować ng-repeat="card in cards | orderBy:order:reverse"

Answer 1

nie mogę pomóc Kątowymi roztworu w W tej chwili jednak, jeśli jesteś w stanie przetłumaczyć rozwiązanie React na Angular jeden z następujących algorytmów i kod może być pomocny.

Aby wygenerować ten układ, należy podzielić elementy na n kolumn i pozwolić układowi domyślnemu ustawić je w pionie. Następnie ułóż te kolumny za pomocą flexboksa lub szerokości procentowej.

Aby sieć reagowała, zasubskrybuj zdarzenia zmiany rozmiaru okna i obliczyć pożądaną liczbę kolumn. columnCount = itemWidth => availableWidth => Math.floor(availableWidth/itemWidth)

Spójrz na working React solution. Responsywne rozwiązanie to available here.

Answer 2

Powinieneś być w stanie wykorzystać właściwości układu przewidzianych przez materiał kątowej ....

Twój kontener div

<div layout="column" layout-wrap layout-align="start space-between"> 

...inner divs 

</div> 

Docs można znaleźć tutaj: https://material.angularjs.org/latest/layout/introduction

Answer 3

Flexbox nie system kratowy - więc nie możesz wypełnić pionowych przestrzeni, gdy jesteś wrap - więc najlepsze, co możesz uzyskać, to także, jeśli znasz wysokość.

Najlepszym rozwiązaniem jest zatem użycie systemu, który pozwala systemom sieciowym - i Angular Masonry pasuje do przypadku użycia tutaj.

zobacz demo poniżej:

angular.module("app", ['wu.masonry']).controller("ctrl", function($scope) { 
 
    $scope.cards = [ 
 
    "http://placehold.it/200x100", 
 
    "http://placehold.it/200x100", 
 
    "http://placehold.it/200x200", 
 
    "http://placehold.it/200x300", 
 
    "http://placehold.it/200x100", 
 
    "http://placehold.it/200x200" 
 
    ]; 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper > .block { 
 
    margin: 0 auto; 
 
} 
 
.grid-item { 
 
    margin-bottom: 5px; 
 
    display: block; 
 
    border: 1px solid #FFA500; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<!-- Angular masonry scripts --> 
 
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.js"></script> 
 
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script> 
 
<script src="https://passy.github.io/angular-masonry/angular-masonry.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl" class="wrapper"> 
 

 
    <div class="block" masonry="{columnWidth: 200, gutter: 5, itemSelector:'.grid-item',fitWidth:true}"> 
 
    <div class="masonry-brick" ng-repeat="img in cards track by $index"> 
 
     <img class="grid-item" ng-src="{{img}}"/> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

Użyłem tej kątowe rozwiązanie na kilku projektach:

https://github.com/passy/angular-masonry

Zawsze pracował bardzo dobrze i łatwy w użyciu .

Mają również spojrzeć na to: http://masonry.desandro.com/#getting-started Jak to jest używane jako bazowego biblioteki w wielu spojrzeń murowanych (Pinterest wygląd).

Nadzieję, że pomaga.

Answer 5

Tworzę plunkr, więc pokaż dowód koncepcji, jak można to osiągnąć.

http://plnkr.co/j5yZQHK3D7l3nPJ8cPlB

Można wykorzystać layout-wrap i flex aby osiągnąć ten typ układu, który ma zasadniczo bez potrzebnej css.

<div layout="column" layout-wrap> 
    <md-card ng-repeat="card in vm.cards | orderBy:'order':!reverse" flex> 
    ... 
    </md-card> 
</div> 

To, co się robi, polega na dostosowywaniu wierszy, tak aby zawartość zajmowała tylko potrzebne miejsce, ale każda kolumna pozostała tego samego rozmiaru. To najlepsze z obu światów! Dodatkowo, można zamówić je w jakikolwiek sposób w razie potrzeby (również wykazane w plunkr)

Answer 6

ja potrzebowałem dokładnie ten sam składnik. Ale nie mogłem znaleźć czystego rozwiązania css, a flexbox zamawia karty od góry do dołu.

Istnieje kilka opcji opartych na AngularJS. Ale ponieważ używam Angular, nie mogłem ich użyć.

Z tego powodu opracowałem komponent, który ustawia elementy od lewej do prawej. Elementy mają taką samą szerokość i różną wysokość. Pozycje elementów każdy element obliczając X i Y:

https://github.com/kodfarki/ng-pinterest-layout

Możesz spróbować, nawet jeśli składnik jest w fazie rozwoju.