如何創建一個響應式（變化的列數）角材料卡網格

我正在嘗試創建一個角度有點像引導網格的角材卡網格。理想情況下，對於小屏幕寬度，卡將爲全角，並在較大的斷點處跳至兩列。如何創建一個響應式（變化的列數）角材料卡網格

的問題是，A-M代表每個卡創建列。我還沒有想出如何指定每個斷點的列數。

下面是我使用的標記，這需要來自行卡布局，列在第一個斷點的基礎：

<div ng-app layout="column" layout-gt-sm="row" class="layout-sm-column layout-row"> 
    <div flex class="flex" ng-repeat="i in [1,2,3,4,5] track by $index"> 
    <md-card>

有一個similar question on SO了，但接受的答案是因爲它使用自定義CSS而且不是流體寬度，所以不令人滿意。我找不到其他類似的例子。

我想我可以用Angular循環每兩張牌並創建堆疊集，但這似乎是不必要的繁瑣。我必須認爲材料提供了更好的解決方案。此外，這樣的解決方案會在卡片高度不同的頁面留下空白。材料似乎面向砌體般的柔性佈局，我想堅持下去。

謝謝。

來源

2015-12-14 isherwood

可能只用CSS，甚至磚石外觀/風格。 http://designshack.net/articles/css/masonry/#bsap_1610 – g19fanatic

問題是如何使用Angular Material做到這一點。我有很多其他圖書館和技術的經驗。這似乎是A.M.的一個缺陷，但是，除非我錯過了一些東西。 – isherwood

我遇到了這個完全相同的問題，並沒有一個原生解決方案將爲你做一個石工類型的網格。 AM的響應來自Flexbox容器，而不是指令級別，所以它們並不真正相互通信。我實際上就像你自己建議的那樣創建了堆疊集。 – staypuftman

您可以使用材質Grid-List，它允許自定義字間距並在寬度更改時對動畫進行動畫處理。

我調整了網站的樣本，並在內容中添加了md-card。請務必在md-card上添加layout-fill。您可以輕鬆地調整樣品的列數。

http://codepen.io/anon/pen/QypjWY

我也適應你的5卡的樣品。您需要知道卡片的高度才能使用網格列表，但您可以輕鬆實現小屏幕上的100％高度。您可以對行使用比率或固定的CSS高度，然後您可以靈活地顯示內容。

<md-grid-list ng-app="app" layout-fill flex 
    md-cols-sm="1" 
    md-cols-md="2" 
    md-cols-gt-md="5" 
    md-row-height-sm="100%" 
    md-row-height="600px" 
    md-gutter="8px"> 
    <md-grid-tile ng-repeat="i in [1,2,3,4,5] track by $index"> 
     <md-card layout-fill>

http://jsfiddle.net/2afaok1n/34/

編輯：

如果您是不是在尋找某種交錯網格的，那麼你必須添加庫：angular-deckgrid，它只是提供了網格佈局，一切內容是角材料。不像angular-masonry這個庫沒有任何依賴關係。如果你不擔心添加jQuery之類的東西，那麼你也可以使用angular-masonry。

<div ng-app="app" ng-controller="DeckController" flex layout="column"> 
    <deckgrid class="deckgrid" flex source="data"> 
     <md-card>

甲板佈局的重要部分是CSS configuration。有了這個，你可以配置列的數量和寬度。我已經使用角度材質sm斷點的媒體查詢切換到單列布局。

.deckgrid::before { 
    content: '4 .column.column-1-4'; 
    font-size: 0; 
    visibility: hidden; 
} 

.deckgrid .column { 
    float: left; 
} 

.deckgrid .column-1-4 { 
    width: 25%; 
} 

.deckgrid .column-1-1 { 
    width: 100%; 
} 

@media screen and (max-width: 960px) { 
    .deckgrid::before { 
    content: '1 .column.column-1-1'; 
    } 
}

http://jsfiddle.net/2afaok1n/39/

編輯2：

也有磚石版本不需要jQuery和一個簡單的指令，使用它：angular-masonry-directive。這裏是一個例子，它與另一個類似。

http://jsfiddle.net/xjnp97ye/1/

來源

2016-01-05 11:21:02 kuhnroyal

第一個例子似乎是一個好開始，但我不確定我可以與固定的高度。我爲我的目的簡化了演示：http://codepen.io/anon/pen/YwZwbz第二個在行之間留下不同的空白，就像我在我的問題中提到的那樣。它可能不會工作。 – isherwood

我對你的更新很感興趣，但第三個例子（39）似乎沒有表現出響應行爲。第四個例子看起來是一個不錯的選擇。 – isherwood

你是對的，第三個是有限的。如果您以較大的寬度運行該示例，然後縮小寬度，它將採取響應，但不會採取其他方式。然而，它將按照預期在具有固定寬度和/或重繪的不同設備上工作，例如，設備旋轉等。庫解析僞':: before' CSS塊，並且必須在那裏出錯。 – kuhnroyal

如果我理解正確的問題，這就像一個魅力：

<body ng-app="app" ng-cloak> 
    <div layout="column" layout-gt-sm="row" layout-wrap> 
    <div flex="25" flex-gt-sm="50" ng-repeat="i in [1,2, 3, 4, 5] track by $index"> 
    <md-card> 
    <!-- You code--> 
    </md-card> 
    </div> 
    </div> 
</body>

Plunker多個斷點：（調整內部窗口，而不是瀏覽器窗口） http://plnkr.co/edit/8QPYdzLD8qzEbdz5sesE?p=preview

闖入者已更新爲顯示不同身高的咭。
已經制定了2條指令，所有卡片的最大高度保存在內存中，並且這個卡片適用於所有卡片。

來源

2016-01-09 22:24:23 gr3g

謝謝，但我不能讓它顯示多個斷點更改。你能否改進演示以顯示至少3？ – isherwood

查看更新。不客氣 – gr3g

我推出了不同內容的版本。正如你所看到的，它做得不好。卡片一起運行並切斷內容。思考？ http://plnkr.co/edit/VNyWOpCocKGfY0qX2IjK?p=preview – isherwood

<div ng-repeat="i in [1,2, 3, 4, 5] track by $index" flex-xs="100" flex-sm="50" flex-md="50" flex="33"> 
<md-card> 

    <md-card-title > 
    <md-card-title-text > 
     <span class="md-headline">Demo Title {{i}}</span> 
     <span class="md-subhead">Demo Description</span> 
    </md-card-title-text>  
    </md-card-title> 
</md-card> 
</div>

檢查這個例子：http://codepen.io/ktn/pen/jqNBOe

來源

2016-02-25 10:19:10 kTn

對，但如果你的卡片不是全部相同高度呢 – chrismarx

如果我理解你的問題的權利然後用這個代碼，並更換你好任何你喜歡

<md-grid-list md-cols-lg="12" md-cols-gt-lg="15" md-cols-xs="3" md-cols-sm="6" md-cols-md="9" md-row-height-gt-md="1:1" md-row-height-md="1:1" md-row-height="1:2" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px"> 
      <md-grid-tile ng-repeat="contact in contacts" md-colspan="3" md-rowspan-gt-sm="4" style="background:red;"> 
       hello 
      </md-grid-tile> 
     </md-grid-list>

來源

2016-02-25 14:15:32

這是一個很好的答案。唯一的問題是，網格列表有一些不兼容性，例如，與我認同的無限滾動 – chrismarx

@chrismarx，但不能將網格列表保存在虛擬重複內嗎？那裏我們可以實現無限滾動.. –

我想我試過了，並且有這個問題 - https://github.com/angular/material/issues/5312 – chrismarx

如何創建一個響應式（變化的列數）角材料卡網格

回答

相關問題