很多人都想做瀑布流的效果，这里告诉大家官网使用的方法。
首先要下载瀑布流的插件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. android-seekbar的thumb图片不居中显示的处理办法

    seekbar更换图片后,发现thumb的图片不会居中(竖直方向)显示了,代码如下: <SeekBar android:id="@+id/wb_seekbar" androi ...

  2. Spring 集成hibernate时配置连接释放模式

    http://zmfkplj.iteye.com/blog/220822 程序出现一个奇怪的现象,用Quartz作业调度启动任务,运行一段时间后,任务会卡在一个查询接口处,久久不能运行完毕. 我本能的 ...

  3. HTML学习笔记（四）

    1．       css行内样式要注意的问题: a)     stylekeyword要作为标签的一个属性写在标签内: b)     等号后面是一对双引號包括的内容. c)      Style属性和 ...

  4. ubuntu14.04 flash driver 安装

    直接将14.04镜像直接放到flash driver 中 然后在bios设置flash driver 优先启动 然后格出一块盘给ubuntu 安装使用 按操作要求一路点下去就可以,记得选windows ...

  5. IE的坏脾气——3像素Bug

    在一个典型的浮动中,如下面的图片所示:灰色矩形是外部容器,绿色容器在外部容器内向左浮动,未浮动的部分包围着浮动部分.但是IE6在解析这样的浮动时,会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距. ...

  6. 如何使用 TP中的公共函数 (定义在common/common.php中的函数)

    如何使用 TP中的公共函数 (定义在common/common.php中的函数) (2011-09-30 15:32:09) 转载▼ 标签: 杂谈   1.在common/common.php 中有个 ...

  7. scala 系列文章汇总

    本文作为scala系列文章索引 本博客目录: case class 背后的秘密 以spark源码为参照分析模式匹配及种类 另外,本文还收录了几个作者认为比较好的博文或网站: scala 相关网址汇总 ...

  8. samba在linux下的配置

    Samba配置过程容易遇到的问题 samba的安装很简单,搜索一下都能找到.我主要是记录一上我碰到的问题及解决的办法 第一个问题 防火墙的问题,粗暴的办法是直接把防火墙关掉,合适的做法是把samba用 ...

  9. goldengate原理与简单配置

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

  10. android代码中自定义布局

    转载地址:http://blog.csdn.net/luckyjda/article/details/8760214RelativeLayout rl = new RelativeLayout(thi ...