Angular實現瀑布流的庫angular-deckgrid

一. 安裝

1. bower install --save angular-deckgrid

2. 添加代碼到你的HTML

3. 添加到你的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}}

<img src="" data-ng-src="{{card.src}}">

為了更好的設計響應式的頁面，你可以選擇使用如下來代碼來定義不同設備或者顯示器上的展示行為：

@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