很多人都想做瀑布流的效果，这里告诉大家官网使用的方法。
首先要下载瀑布流的插件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. atitit.MyEclipse10 中添加svn插件故障排除

    atitit.MyEclipse10 中添加svn插件故障排除 删除\configuration \org.eclipse.update 不行... 二. 在configuration下的config ...

  2. ARM（CM3）的汇编指令

    转http://blog.csdn.net/gaojinshan/article/details/11534569 16位数据操作指令 名字 功能ADC  带进位加法(ADD with Carry)  ...

  3. 10张思维导图带你学习【Java​Script】

    思维导图小tips:思维导图又叫心智图.是表达发射性思维的有效的图形思维工具 ,它简单却又极其有效,是一种革命性的思维工具.思维导图运用图文并重的技巧.把各级主题的关系用相互隶属与相关的层级图表现出来 ...

  4. C++学习笔记34 模版的原理

    模版在C++中具有很重要的地位.STL就是大量运用模版写出来的. 模版的长处我就不一一列举了.这里我仅仅说一下模版的原理. 当编译器遇到模版方法定义的时候,编译器进行语法检查,可是并不会编译模版.编译 ...

  5. 给linux操作系统安装中文环境

    如果设置的默认环境是英文,需要安装中文环境.最简答的方法如下: sudo apt-get install language-pack-zh-hant sudo apt-get install lang ...

  6. What is the difference between application server and web server?

    http://stackoverflow.com/questions/936197/what-is-the-difference-between-application-server-and-web- ...

  7. easyui data-options的使用

    easyui data-options的使用 data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性.通过这个属性,我们可以对easyui组件的实例化可以完全写入到ht ...

  8. goldengate原理与简单配置

    goldengate的原理:http://www.ipresst.com/works/52bc44c42954a7d73b0003f2 简单单向配置: 在oracle官网下载下载 GoldenGate ...

  9. makefile编写---单个子目录编译模板

    经过这次地库项目之后,虽然时间不久,跟团队在一起,虽然队员不一定在技术上有过人之处,但是来自大公司的员工,在工具使用和代码规范方面还是有点可鉴之处,在搭建主控模块是,就得面临makefile编写,因为 ...

  10. javascript对象定义

    转载自:http://blog.sina.com.cn/s/blog_75a8cfac0100pif0.html javascript定义对象写法 javascript定义对象的几种简单方法 1.构造 ...