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}}

<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