AngularJs 实现卡片式布局（贺卡制作99dh）

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

本文介绍使用 Angularjs 实现卡片式布局（贺卡制作99dh）。卡片式布局又称为瀑布流布局，或者也称为贺卡式布局。

贺卡制作99dh只是一个demo，我这里就不重点介绍。本文的demo主要是借助 angular-waterfall 插件来实现。

上图就是本文将要实现的demo的效果。

阅读过我博客的朋友可能知道，我前面有一篇文章介绍 masonry.js，该插件是一款基于 jQuery 的插件，也可以实现卡片式布局（）。

angular-waterfull.js 可以在 github 上下载并阅读相关用法。

angular-waterfall是一个定列自适应瀑布流指令。它主要有下面两个属性：

• contentWidth(optional) 外层容器宽度，不设则auto
• cols(optional) 指定显示列数，默认6

angular-waterfall用法

引入js文件：

<script type="text/javascript" src="js/angular.min.js"></script>  
<script type="text/javascript" src="js/angular-waterfall.js"></script>

然后，模块注入：

angular.module('angularWaterfallApp',["ngWaterfall","ui.router"]);
//注意，这个地方中括号里面的ui.router是另一个js（angular-ui-router.min.js）文件里的，如果不需要这个js文件可以去掉ui.router
angular.module('angularWaterfallApp',["ngWaterfall","ui.router"]) ;

瀑布流布局模板：

<ul class="waterfall-list" ng-waterfall cols="6">
	<li ng-repeat="image in images" repeat-finished>
		<div class="data-block">
			<img src="{{image.url}}" alt="{{image.summary}}"/>
			<p>{{image.title}}</p>
			<p>{{image.summary}}</p>
		</div>
	</li>
	<div class="loadMore" ng-if="loadMore" ng-infinite-scroll ng-click="loadMoreData()">{{text}}</div>
</ul>

controller 代码：

page++;
$scope.$on("waterfall:loadMore",function(){//滚动自动填充事件
	$scope.loadMoreData();
})

如果你需要用滚轮滚到底部加载，可以用下面这个方法：

<div class="loadMore" ng-if="loadMore" ng-infinite-scroll ng-click="loadMoreData()">{{text}}</div> 

最终运行效果，就是我们上图中的样子。

推荐阅读

• 使用瀑布流插件 Masonry 进行瀑布流布局
• HTML5仿素材网的瀑布流设计

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » AngularJs 实现卡片式布局（贺卡制作99dh）