Angular實現瀑布流的庫angular-deckgrid

一. 安裝

1. bower install --save angular-deckgrid

2. 添加代碼到你的HTML

1. 添加到你的angular模塊中：

angular.module('your.module', [
'akoenig.deckgrid']);
二. 代碼使用

定義聲明：

定義數據結構：

$scope.photos = [
id: 'p1', 'title': 'A nice day!', src: "http://lorempixel.com/300/400/",
id: 'p2', 'title': 'Puh!', src: "http://lorempixel.com/300/400/sports",
id: 'p3', 'title': 'What a club!', src: "http://lorempixel.com/300/400/nightlife"];
定義cardtemplate：

{{card.title}}

爲了更好的設計響應式的頁面，你能夠選擇使用以下來代碼來定義不一樣設備或者顯示器上的展現行爲：

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

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

}
所有搞定！查看具體的演示效果，請點擊以下地址！相信若是你須要在angular.js中生成瀑布流效果的話，這個輕量級的模塊是個不錯選擇！

下載：https://github.com/akoenig/angular-deckgrid

演示：http://akoenig.github.io/angular-deckgrid