很多人都想做瀑布流的效果，这里告诉大家官网使用的方法。
首先要下载瀑布流的插件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. iOS开发－为我们的项目添加头文件prefix header

    在XCode6新建项目时,不再自动创建头文件,因此我们需要手动添加. 点击我们的项目->Build Settings -> all -> 搜索“prefix” -> 修改pre ...

  2. mongoDB 获取最后插入的文档的ObjectID/_id方法

    http://stackoverflow.com/questions/3338999/get-id-of-last-inserted-document-in-a-mongodb-w-java-driv ...

  3. asp.net+mvc+easyui+sqlite 简单用户系统学习之旅（五）—— 解决tabs选择已建tab显示但datagrid的toolbar消失的问题

    项目需要反复运行,调整bug.发现在选择已有选项卡时,虽然不需要再新建tab,直接跳转到已有的tab上,但问题是显示的datagrid有事会出现toolbar消失的问题.网上也有不少同学出现类似问题, ...

  4. 解决window10系统电脑插入耳机之后没有声音的问题

    其实办法也是从百度百科上查到的 ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄     可能是因为自己某个不小心的操作更改了设置 1. 首先要点开设置按钮,在搜索栏输入控制面板 (当然知道控制面板在哪里的小伙伴就不用 ...

  5. 【CODEFORCES】 C. Captain Marmot

    C. Captain Marmot time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  6. McCabe环路复杂度计算方法

    环路复杂度用来定量度量程序的逻辑复杂度.以McCabe方法来表示. 在程序控制流程图中,节点是程序中代码的最小单元,边代表节点间的程序流.一个有e条边和n个节点的流程图F,可以用下述3种方法中的任何一 ...

  7. Android开发系列之性能优化

    一直想整理一篇关于Android性能优化的博客,正好今天借鉴一些书籍资料,总结一下自己对于这块的一些认识.相信大家都听说过16ms的原则,即每两个画面之间的绘制时间间隔不能超过16ms,否则人眼能够感 ...

  8. centos6.5下redis的安装与配置

    参照官网描述(https://redis.io/download),linux下redis安装步骤如下: $ wget http://download.redis.io/releases/redis- ...

  9. linux-Centos下磁盘管理（fdisk）

    Centos下磁盘管理 - linux 磁盘基础知识 磁盘结构 磁道:上图中硬盘被一圈圈分成18等分的同心圆,这些同心圆就是磁道.但打开硬盘,用户不能看到这些,它实际上是被磁头磁化的同心圆.这些磁道是 ...

  10. 单点登录SSO简介

    一.什么是单点登录SSO(Single Sign-On) SSO是一种统一认证和授权机制,指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即通过一个应用中的安全验证后,再访问其他应用 ...