Angular deckgrid 是一個(gè)數(shù)據(jù)網(wǎng)格用AngularJS的一部分,需要的朋友歡迎下載。該指令不依賴(lài)于視覺(jué)展示，所有的響應(yīng)和美觀都依賴(lài)于你的 CSS 文件。如果你現(xiàn)在選擇使用angular.js作為你的開(kāi)發(fā)框架的話(huà)，實(shí)現(xiàn)類(lèi)似masonry的網(wǎng)格布局效果將會(huì)變得更加簡(jiǎn)單，今天介紹的輕量級(jí)類(lèi)庫(kù)Angular-deckgrid能夠幫助你快速的生成類(lèi)似的魔術(shù)布局效果。

安裝教程

一. 安裝

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>

定義數(shù)據(jù)結(jié)構(gòu)：

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

為了更好的設(shè)計(jì)響應(yīng)式的頁(yè)面，你可以選擇使用如下來(lái)代碼來(lái)定義不同設(shè)備或者顯示器上的展示行為：

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

.deckgrid[deckgrid]::before {

content: '1 .column.column-1-1';

}

.deckgrid .column-1-1 {

width: 100%;

}

}

更新日志

0.6.0版本

打開(kāi)：[修正]我們需要一個(gè)解決方案以防止結(jié)合的模型innerHTML模板

0.5.0版本

升級(jí)用AngularJS的依賴(lài)bower.json（v1.3.0）。

改變集合比較觸發(fā)重畫(huà)。

轉(zhuǎn)自美元的手表以watchcollection美元為了獲得更多的性能。

移植普通未定義檢查用AngularJS標(biāo)準(zhǔn)功能。