有棱角的材質的Google+/Pinterest風格卡片佈局

我正在嘗試使用有角度的材質構建卡片佈局，這將允許卡片具有不同的高度，並且能夠根據窗口寬度更改顯示列的數量。有棱角的材質的Google+/Pinterest風格卡片佈局

這是相當直截了當地得到幾乎我正在尋找這正是在這裏顯示這個question但在回答鏈接的例子這裏不允許卡有一個動態的高度。

幾個星期前，我試過angular-masonry，但不會得到它的工作，我可以再次嘗試與角砌石，但理想的情況下想實現它，而不使用額外的JavaScript庫。

目前我達到了我想通過ng重複多列，然後選擇性地將我的卡片添加到每列，例如，如果我有兩列添加奇數卡到列1，甚至卡到列2，但這會導致新每當調整列的大小時，都會將元素渲染並添加到DOM中。我希望能夠使用相同的元素，並通過CSS實現所需的行爲。

2015-12-06 jalbasri

角砌石是去朋友的正確方向，再試一次。我很少推薦外部圖書館，但石工是輕量級的，可爲您節省數週的工作時間。 – AVAVT

感謝朋友！大約20分鐘的調整後，角砌石就像一個魅力。這實際上是幾個月前，我開始嘗試時，我不記得到底是哪裏出了問題，但我真的很沮喪，發現我上面描述的解決方法離開了它，並繼續在其他部分工作該項目知道我不得不回來找一個更好的方式來做到這一點。從那以後，我一直想回到原來的位置，然後看看我的舊承諾，看看我當時做錯了什麼，但是這次它工作得很好。歡呼:) – jalbasri

您是否嘗試過使用column-count？

column-count: $columns; 
column-gap: 0px; 
-moz-column-count: $columns; 
-moz-column-gap: 0px; 
-webkit-column-count: $columns; 
-webkit-column-gap: 0px;

您可以將其包裝在@media針對不同尺寸的查詢中。

來源

2016-03-03 03:02:19

嗨，是的，我試過列數。 2問題：它將卡放在列上而不是橫過列，並且當新卡被加載時，卡切換列。兩者都不可以爲我做條件。 – jalbasri

我沒有意識到這一點（因爲我只使用靜態數據嘲笑了這一點）。我最近遇到了Angular Deckgrid：https://github.com/akoenig/angular-deckgrid你試過了嗎？ –

有棱角的材質的Google+/Pinterest風格卡片佈局

回答

相關問題