Angular Deckgrid(专用仿Masonry布局的类库)

system

软件标签:  angular
angular deckgrid是一个数据网格用angularjs的一部分,需要的朋友欢迎下载。该指令不依赖于视觉展示，所有的响应和美观都依赖于你的 css 文件。如果你现在选择使用angular.js作为你的开发框架的话，实现类似masonry的网格布局效果将会变得更加简单，今天介绍的轻量级类库angular-deckgrid能够帮助你快速的生成类似的魔术布局效果。






安装教程


一. 安装



1. bower install --save angular-deckgrid



2. 添加代码到你的html



<script src="<your-bower-components>/angular-deckgrid/angular-deckgrid.js"></script>



3. 添加到你的angular模块中：



angular.module(“your.module“, [



“akoenig.deckgrid“



]);


使用教程


定义声明：



<div deckgrid source="photos" cardtemplate="templates/deckgrid-card.html" class="deckgrid"></div>



定义数据结构：



$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：



<div class="a-card">



<h1>{{card.title}}</h1>



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



</div>



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



@media screen and (max-width: 480px){



.deckgrid[deckgrid]::before {



content: “1 .column.column-1-1“;



}



.deckgrid .column-1-1 {



width: 100%;



}



}


更新日志


0.6.0版本



打开：[修正]我们需要一个解决方案以防止结合的模型innerhtml模板



0.5.0版本



升级用angularjs的依赖bower.json（v1.3.0）。



改变集合比较触发重画。



转自美元的手表以watchcollection美元为了获得更多的性能。



移植普通未定义检查用angularjs标准功能。

https://blog.51cto.com/u_16099270/9147646