很多人都想做瀑布流的效果，这里告诉大家官网使用的方法。
首先要下载瀑布流的插件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. 区分Activity的四种加载模式

    在多Activity开发中,有可能是自己应用之间的Activity跳转,或者夹带其他应用的可复用Activity.可能会希望跳转到原来某个Activity实例,而不是产生大量重复的Activity. ...

  2. C语言-EOF和feof()判断文件结尾的区别

    今天获取一个图片内容时, fopen("aaaaaa.png", "r"), 读取完文件头就停止了, 后来模式改为 "rb" 就可以了, 特 ...

  3. Jmeter-安装及配置(一)

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文 ...

  4. C/C++中，空数组、空类、类中空数组的解析及其作用

    转自:http://blog.sina.com.cn/s/blog_93b45b0f01015s95.html 我们经常会遇到这些问题: (1)C++中定义一个空类,他们它的大小(sizeof) 为多 ...

  5. WIN10系统如何设置系统的护眼色

    小编的眼神不是很好,所以喜欢把电脑的各种文档的背景色设置成护眼色(就是在视觉效果看起来非常舒适的那种淡绿色) 方法/步骤     windows+R键调出运行窗口(或者鼠标右击开始键,选择运行)   ...

  6. Unity3D - 发布Android游戏

    本文将介绍如何使用Unity3D来发布Android游戏,这里我使用的Unity3D版本为4.6.3f1 下载Java SDK 使用Unity3D来发布Android游戏时需要用到Android SD ...

  7. python3输出指定log信息

    问题背景: win10 python xxx.py > c:test.txt 上面这句只能把信息输出到test.txt,但是控制台看不到信息 ########################## ...

  8. deepin linux下python安装mysqldb

    ` sudo pip search MySQL-python `

  9. centos修改启动顺序，登录后提示，启动级别，主机名，免密登录

    修改启动顺序 # vim  /etc/inittab ....... d:3:initdefault: #找到这一行,d:3:initdefault:最小化启动 d:5:initdefault:图形界 ...

  10. ubi实际使用

    ubifs号称性能比yaffs2 好,同时压缩可读写,文件系统image体较小同时可写.1. uboot使能对UBIFS的支持#define CONFIG_CMD_NAND#define CONFIG ...