Angular Deckgrid(专用仿Masonry布局的类库) v0.6.0 官方最新版

Angular deckgrid是数据网格AngularJS的一部分。欢迎有需要的朋友下载。这个指令不依赖于视觉显示，所有的反应和美观都依赖于你的CSS文件。如果现在选择使用angular.js作为自己的开发框架，会更容易实现类似于砖石的网格布局效果。今天介绍的轻量级类库Angular-deckgrid可以帮助你快速生成类似的魔法布局效果。

安装教程

一、安装

1.凉亭安装-节省角度-甲板

2.将代码添加到您的HTML中

脚本src=' your-bower-components/angular-deck grid/angular-deck grid . js '/脚本

3.添加到您的角度模块：

angular.module('your.module '，[

akoenig.deckgrid '

]);

使用教程

定义声明：

div deck grid source=' photos ' CardTemplate=' templates/deck grid-card . html ' class=' deck grid '/div

定义数据结构：

$scope.photos=[

id: 'p1 '，' title': '天气真好！'，src : ' http://lorempixel.com/300/400/'，

id: 'p2 '，' title': 'Puh！'，src : ' http://lorempixel.com/300/400/sports '，

id: 'p3 '，' title': '多棒的俱乐部啊！'，src : ' http://lorempixel.com/300/400/夜生活'

];

定义卡片模板：

div class='a-card '

h1{{card.title}}/h1

img src=' ' data-ng-src=' { { card . src } } '

/div

为了更好地设计响应页面，您可以选择使用以下代码来定义不同设备或显示器上的显示行为：

@媒体屏幕和(最大宽度： 480 px){ 0。deck grid[deck grid]: before {

content :“1 . column . column-1-1”；

}。deckgrid。第-1-1栏{

宽度： 100%；

}

}

更新日志

版本0.6.0

打开：[修复]我们需要一个解决方案来防止模型内部HTML模板的组合

版本0.5.0

升级依赖于AngularJS的bower.json(v1.3.0)。

更改集合比较会触发重绘。

手表从美元转移到手表收集美元，以获得更多的性能。

移植AngularJS的标准函数进行一般的未定义检查。