本文介绍使用 Angularjs 实现卡片式布局（贺卡制作 99dh）。卡片式布局又称为瀑布流布局，或者也称为贺卡式布局。
更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏
贺卡制作 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>
最终运行效果，就是我们上图中的样子。
web 前端中文站点评：
AngularJs 存在现代化的前端框架编写的网站的爬虫问题，如果读者想了解爬虫相关的知识，可以参考
HEADLESS-CHROME-CRAWLER 教程，headless-chrome-crawler 是一个自带 JavaScript 执行环境的爬虫插件。它支持分布式，是一款分布式爬虫。
【注：本文源自网络文章资源，由站长整理发布】
