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