• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

关于AngularJs怎样实现卡片式布局(贺卡制作99dh)

JAVA web前端中文站 2年前 (2017-10-08) 1102次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

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

关于 AngularJs 怎样实现卡片式布局(贺卡制作 99dh)

上图就是本文将要实现的 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 执行环境的爬虫插件。它支持分布式,是一款分布式爬虫。

【注:本文源自网络文章资源,由站长整理发布】


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:关于 AngularJs 怎样实现卡片式布局(贺卡制作 99dh)
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址