一. 安装

  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

Angular实现瀑布流的库angular-deckgrid的更多相关文章

  1. 玩转Masonry JS库来实现瀑布流Web效果

    工作项目中需要制作个Mobile上的Web App的展示,方便快捷访问和评价反馈.在展示页面能看到应用展示图,点击进入Web应用.我不是前端开发者,对HTML, CSS, JS这三剑客仅仅是略知一二. ...

  2. iOS运营级B2B服务平台App、自定义图标库、个人中心页面、识别身份证Demo、瀑布流等源码

    iOS精选源码 简单的个人中心页面-自定义导航栏并予以渐变动画 一个近乎完整的可识别中国身份证信息的Demo 可自动快速... iOS可自定义图表库 - PNChart 开源一款曾是运营级的B2B服务 ...

  3. vuejs和webpack项目(VueComponent)初尝试——瀑布流组件

    碎碎念:     好久不见,最近自己有些懈怠没更过多少博,主要原因之一是对自己学习方式的一些思考,翻看之前的博客多是记录学习笔记这反映出了自己对于前端还停留在学习-复习知识点的阶段压根没多少实践经验啊 ...

  4. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...

  5. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  7. 纯手工打造漂亮的瀑布流,五大插件一个都不少Bootstrap+jQuery+Masonry+imagesLoaded+Lightbox!

    前两天写的文章<纯手工打造漂亮的垂直时间轴,使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身!>受到很多网友的喜爱,今天特别推出姊妹篇<纯手工打造漂亮的瀑 ...

  8. thinkPHP实现瀑布流的方法

    thinkPHP实现瀑布流的方法 文章TAG:thinkphp 瀑布流 时间:2014-11-29来源:www.aspku.com 作者:源码库 文章热度: 131 ℃ 过期已备案域名,注册就能用!终 ...

  9. 【转】android中最好的瀑布流控件PinterestLikeAdapterView

    [源地址]http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/0919/1696.html 之前我们介绍过一个开源的瀑布流控件Stag ...

随机推荐

  1. Visual Studio 2012中文旗舰版(序列号和下载地址)

    序列号:YKCW6-BPFPF-BT8C9-7DCTH-QXGWC 链接: http://pan.baidu.com/s/1pLGhDjl 密码: 3udq

  2. 定义类Human,具有若干属性和功能;定义其子类Man、Woman; 在主类Test中分别创建子类、父类和上转型对象,并测试其特性。

    package com.hanqi.test; public class Humen { private String speak; private String read; private Stri ...

  3. 好用的排名函数~ROW_NUMBER(),RANK(),DENSE_RANK() 三兄弟

    排名函数三兄弟,一看名字就知道,都是为了排名而生!但是各自有各自的特色!以下一个例子说明问题!(以下栗子没有使用Partition By 的关键字,整个结果集进行排序) RANK 每个值一个排名,同样 ...

  4. HBase 高性能获取数据(多线程批量式解决办法) + MySQL和HBase性能测试比较

    摘要:   在前篇博客里已经讲述了通过一个自定义 HBase Filter来获取数据的办法,在末尾指出此办法的性能是不能满足应用要求的,很显然对于如此成熟的HBase来说,高性能获取数据应该不是问题. ...

  5. 使用DBI(perl)实现文本文件的导入导出mysql

    DBI 是perl脚本连接数据库的一个模块.perl脚本相对shell更灵活,功能更强大,跨平台能力强.相对可执行jar包要简单很多. ​1.下载安装包DBI-1.631.tar.gzperl脚本下载 ...

  6. /etc/fstab 参数详解及如何设置开机自动挂载

    某些时候当Linux系统下划分了新的分区后,需要将这些分区设置为开机自动挂载,否则,Linux是无法使用新建的分区的. /etc/fstab 文件负责配置Linux开机时自动挂载的分区. Window ...

  7. php反射机制

    PHP5添加了一项新的功能:Reflection.这个功能使得phper可以reverse-engineer class, interface,function,method and extensio ...

  8. cookie实现自动登录

    有很多Web程序中第一次登录后,在一定时间内(如2个小时)再次访问同一个Web程序时就无需再次登录,而是直接进入程序的主界面(仅限于本机).实现这个功能关键就是服务端要识别客户的身份.而用Cookie ...

  9. TCP三次握手,数据传输,四次挥手

    TCP包结构 一个TCP包结构如下: 一个TCP包主要由TCP包头和数据部分组成,包头固定部分为20字节,选项和数据部分根据实际情况设置为4N(N可以为0)字节. 1.16bit源端口和目的端口号,它 ...

  10. java变量的初始化

    public class Init { private int age;//非静态初始化语句<3> private static String name; //静态初始化语句,先初始化静态 ...