Pinterest-Layout mit eckigem Material
Ich brauche das folgende Layout für Angular Material , bei dem die Karten von links nach rechts eingefügt werden, und am Ende des verfügbare Breite und füllen Sie den vertikalen Abstand zwischen den Karten aus. Alle Karten haben die gleiche Breite, aber unterschiedliche Höhe:
Ist das mit eckigen Winkeln und CSS möglich? Wie?
Ich habe versucht, dies mit display:flex zu erreichen, aber ich konnte den vertikalen Raum nicht loswerden:
Ich habe auch eine reine CSS-Lösung gefunden, die das Raumproblem ausarbeitet, aber eine andere Reihenfolge hat und auch eine feste Höhe benötigt: Ссылка
Aktualisieren
Zusätzliche Anforderungen:
- Responsive Layout: Je nach Fenster mit, gibt es weniger oder mehr Spalten; aber sie füllen immer den gesamten verfügbaren Platz aus (adaptive Spaltenbreite, z. B. 100%, 50% usw.)
- Das Einfügen der Karten muss mit
ng-repeat="card in cards | orderBy:order:reverse"funktionieren
6 Antworten
Ich kann Ihnen im Moment mit der angularen Lösung nicht helfen, aber wenn Sie in der Lage sind, React-Lösung in Angular zu übersetzen, könnte ein folgender Algorithmus und Code hilfreich sein.
Um dieses Layout zu generieren, partitionieren Sie die Elemente in n Spalten und lassen Sie sie im Standardlayout vertikal stapeln. Dann legen Sie diese Spalten mit flexbox oder prozentualer Breite aus.
Um das Raster ansprechend zu machen, subskribieren Sie Fenstergrößenänderungsereignisse und berechnen die gewünschte Spaltenanzahl.
columnCount = itemWidth => availableWidth => Math.floor(availableWidth / itemWidth)
Werfen Sie einen Blick auf arbeiten Reagieren Lösung . Responsive Lösung ist hier verfügbar .
Ich erstelle einen Plunkr, um Ihnen den Beweis dafür zu zeigen, wie dies erreicht werden kann.
Sie können layout-wrap und flex verwenden, um den Typ des gewünschten Layouts zu erreichen, wobei im Wesentlichen keine CSS benötigt wird.
Damit passen Sie Ihre Zeilen so an, dass der Inhalt nur den benötigten Platz einnimmt, aber jede Spalte dieselbe Größe hat. Es ist das Beste aus beiden Welten! Zusätzlich können Sie sie in beliebiger Weise bestellen (auch in Plunkr demonstriert)
Ich brauchte genau die gleiche Komponente. Aber ich konnte keine reine css-Lösung finden, und flexbox ordnet die Karten von oben nach unten an.
Es gibt einige auf AngularJS basierende Optionen. Aber da ich Angular benutze, konnte ich sie nicht benutzen.
Aus diesem Grund habe ich eine Komponente entwickelt, die Elemente von links nach rechts positioniert. Elemente haben gleiche Breite und unterschiedliche Höhe. Die Komponente positioniert jedes Element durch Berechnung der x- und y-Koordinaten:
Sie können es versuchen, obwohl die Komponente gerade entwickelt wird.
Flexbox ist nicht ein Rastersystem - also können Sie die vertikalen Leerzeichen nicht ausfüllen, solange Sie wrap - also das Beste, was Sie bekommen können, ist, wenn Sie auch die Höhen kennen.
Daher ist es am besten, ein System zu verwenden, das Grid-Systeme zulässt - und Angular Masonry passt hier zum Anwendungsfall.
Sehen Sie sich eine Demo an:
Tags und Links html angularjs css layout material-design