很多人都想做瀑布流的效果，这里告诉大家官网使用的方法。
首先要下载瀑布流的插件jquery.masonry.min.js 地址：http://masonry.desandro.com/index.html里面包含的很多示例，但是都是英文的。。。我给大家写个小例子吧

流程：

1，页面初始化时，调用插件进行一次排版；
2，当用户将滚动条拖到底部时，用ajax加载一次数据，并排版显示
3，重复2，直到无数据

html代码

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Insert title here</title>
  6. <!--样式-->
  7. <style type="text/css">
  8. body {margin:40px auto; width:800px; font-size:12px; color:#666;}
  9. .item{
  10. border: 1px solid #D4D4D4;
  11. color: red;
  12. margin: 0 10px 10px 0;
  13. padding: 10px;
  14. position: relative;
  15. width: 200px;
  16. }
  17. .loading-wrap{
  18. bottom: 50px;
  19. width: 100%;
  20. height: 52px;
  21. text-align: center;
  22. display: none;
  23. }
  24. .loading {
  25. padding: 10px 10px 10px 52px;
  26. height: 32px;
  27. line-height: 28px;
  28. color: #FFF;
  29. font-size: 20px;
  30. border-radius: 5px;
  31. background: 10px center rgba(0,0,0,.7);
  32. }
  33. .footer{
  34. border: 2px solid #D4D4D4;
  35. }
  36. </style>
  37. <!--样式-->
  38. </head>
  39. <body>
  40. <!--引入所需要的jquery和插件-->
  41. <script type="text/javascript" src="/test/public/Js/jquery-1.7.2.min.js"></script>
  42. <script type="text/javascript" src="/test/public/Js/jquery.masonry.min.js"></script>
  43. <!--引入所需要的jquery和插件-->
  44. <!--瀑布流-->
  45. <div id="container" class=" container">
  46. <!--这里通过设置每个div不同的高度，来凸显布局的效果-->
  47. <volist name="height" id="vo">
  48. <div class="item" style="height:{$vo}px;">瀑布流下来了</div>
  49. </volist>
  50. </div>
  51. <!--瀑布流-->
  52. <!--加载中-->
  53. <div id="loading" class="loading-wrap">
  54. <span class="loading">加载中，请稍后...</span>
  55. </div>
  56. <!--加载中-->
  57. <!--尾部-->
  58. <div class="footer"><center>我是页脚</center></div>
  59. <!--尾部-->
  60. <script type="text/javascript">
  61. $(function(){
  62. //页面初始化时执行瀑布流
  63. var $container = $('#container');
  64. $container.masonry({
  65. itemSelector : '.item',
  66. isAnimated: true
  67. });
  68. //用户拖动滚动条，达到底部时ajax加载一次数据
  69. var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求
  70. $(window).scroll(function(){
  71. if(loading.data("on")) return;
  72. if($(document).scrollTop() > $(document).height()-$(window).height()-$('.footer').height()){//页面拖到底部了
  73. //加载更多数据
  74. loading.data("on", true).fadeIn();         //在这里将on设为true来阻止继续的ajax请求
  75. $.get(
  76. "{:U('Index/getMore')}",
  77. function(data){
  78. //获取到了数据data,后面用JS将数据新增到页面上
  79. var html = "";
  80. if($.isArray(data)){
  81. for(i in data){
  82. html += "<div class=\"item\" style=\"height:"+data[i]+"px;\">瀑布又流下来了</div>";
  83. }
  84. var $newElems = $(html).css({ opacity: 0 }).appendTo($container);
  85. $newElems.imagesLoaded(function(){
  86. $newElems.animate({ opacity: 1 });
  87. $container.masonry( 'appended', $newElems, true );
  88. });
  89. //一次请求完成，将on设为false，可以进行下一次的请求
  90. loading.data("on", false);
  91. }
  92. loading.fadeOut();
  93. },
  94. "json"
  95. );
  96. }
  97. });
  98. });
  99. </script>
  100. </body>
  101. </html>
复制代码

Action代码

    1. class UserAction extends Action{
    2. //初始化的数据
    3. public function index(){
    4. for ($i=0;$i<10;$i++){
    5. $res[$i] = rand(100, 400);
    6. }
    7. $this->assign('height', $res);
    8. $this->display();
    9. }
    10. //获取一次请求的数据
    11. public function getMore(){
    12. for ($i=0;$i<6;$i++){
    13. $res[$i] = rand(100, 400);
    14. }
    15. $this->ajaxReturn($res);
    16. }
    17. }

ThinkPHP官网瀑布流实现分享的更多相关文章

  1. 官网类原型模板分享——Apple

    苹果公司是美国一家高科技公司,引领全球数码产品设计潮流,是世界最具价值的品牌. 此原型正是取自苹果公司官网,网站主要以展示产品为主,排版方式采用大图配简练的文字,清爽简洁的同时突出产品优势,增大产品的 ...

  2. nginx官网下载&百度云分享

    官网下载的链接: nginx官网下载地址:http://nginx.org/download/ 百度云分享 链接:https://pan.baidu.com/s/16m6zrFSkYCJtX0rD2Y ...

  3. SoapUI Pro官网原包百度云盘分享

    SoapUI Pro下载是件很痛苦的事,经常断网,或者是下载时间过长,这里分享的是截止2019.01.01 最新的安装原包. 百度云盘资源:https://pan.baidu.com/s/1SXTFs ...

  4. 轮播组件/瀑布流/组合搜索/KindEditor插件

    一.企业官网 ### 瀑布流 ​ Models.Student.objects.all() #获取所有学员信息 ​ 通过div进行循环图片和字幕 ​ 1.以template模板方法实现瀑布流以列为单位 ...

  5. thinkPHP实现瀑布流的方法

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

  6. 详细分享UICollectionView的自定义布局(瀑布流, 线性, 圆形…)

    前言: 本篇文章不是分享collectionView的详细使用教程, 而是属于比较’高级’的collectionView使用技巧, 阅读之前, 我想你已经很熟悉collectionView的基本使用, ...

  7. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  8. 企业官网Web原型制作分享-Tesla

    Tesla是汽车行业知名的奢华品牌,产品为纯电动汽车,知名度极高.此模板正是取自Tesla的官网,高端大图配上文字排版,彰显了汽车的奢华感觉. 本原型由国产Mockplus(原型工具)和iDoc(智能 ...

  9. 分享一个Vue实现图片水平瀑布流的插件

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 一.需求来源 今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久以前写的一篇文章<JS两 ...

随机推荐

  1. python 利用numpy进行数据分析

    一.numpy.loadtxt读取数据 data=numpy.loadtxt('数据路径.txt',delimiter=',',usecols=(0,1,2,3) , dtype=float)#读取后 ...

  2. javascript 字符串对象新增 replaceAll 方法

    String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) { if(! RegExp.prototype.is ...

  3. Visual Studio提示“无法启动IIS Express Web服务器”或者“无法连接Web服务器IIS Express ”的解决方法

    解决办法:找到程序根目录,删除隐藏的.vs文件夹即可. 问题原因:一般是项目拷贝或者系统设置变更所造成的.

  4. JAVA代码之RocketMQ生产和消费数据

    一.启动RocketMQ [root@master ~]# cat /etc/hosts # Do not remove the following line, or various programs ...

  5. ModelSim 使用笔记1

    ModelSim 使用笔记1   ModelSim提供了简单仿真方式,还有一种要建立project,目前这种方式暂时够我用了. 总结了以下,做了一个简单的<modelsim quick star ...

  6. 分布式服务框架 Zookeeper（四）官方编程指南

    握草,是不是加了官方两个字就可以唬人了. 使用ZooKeeper开发分布式应用 简介 这篇文档是为了那些想利用ZooKeeper的协调服务来构建分布式应用的开发人员而写滴,不相干的走一边去哈.在这儿有 ...

  7. ServletContext与Web应用以及Spring容器启动

    一.ServletContext对象获取Demo Servlet容器在启动时会加载Web应用,并为每个Web应用创建唯一的ServletContext对象. 可以把ServletContext看作一个 ...

  8. 如何让git小乌龟工具TortoiseGit记住你的账号密码

    在使用小乌龟的过程中,发下每次push或者pull都要重复输入账号密码,非常麻烦. 如果能记住账号密码就好了,这样就省去了时间. 怎么设置记住密码 在[系统盘]:\Users[你的用户名]下面,有一个 ...

  9. LeetCode207. Course Schedule

    Description There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses m ...

  10. execute,executeQuery和executeUpdate的区别

    在jdbc中有3种执行sql的语句分别是execute,executeQuery和executeUpdate execute执行增删改查操作 execute返回的结果是个boolean型,当返回的是t ...