thinphp下拉获取更多瀑布流效果

时间：2021-05-28 13:23:31
html页面

<body>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="jquery.masonry.min.js"></script>

<div id="container" class=" container">

<volist name="list" id="vo">

    <div class="item" style="height:230px;">

        {$vo.title}

        <input type="hidden" name="id" value="{$vo.id}"/>

    </div>

</volist>

</div>

<div id="loading" class="loading-wrap">

    <span class="loading">加载中，请稍后...</span>

</div>

<div class="footer"><center>我是页脚</center></div>

<script type="text/javascript">

$(function(){

    //执行瀑布流

    var $container = $('#container');

    $container.masonry({

        itemSelector : '.item',

        isAnimated: true

    });

    var loading = $("#loading").data("on", false);

    $(window).scroll(function(){

        if(loading.data("on")) return;

        if($(document).scrollTop() >

            $(document).height()-$(window).height()-$('.footer').height()){

            //加载更多数据

            loading.data("on", true).fadeIn();

            $.get(

                "{:U('Index/getDbMore')}",

                {"last_id" : $("#container>div:last>input").val()},

                function(data){

                    var html = "";

                    if($.isArray(data)){

                        for(i in data){

                            html += "<div class=\"item\" style=\"height:230px;\">"+data[i]['title']+"";

                            html += "<input type=\"hidden\" name=\"id\" value=\""+data[i]['id']+"\"/></div>";

                        }

                        var $newElems = $(html).css({ opacity: 0 }).appendTo($container);

                        $newElems.imagesLoaded(function(){

                            $newElems.animate({ opacity: 1 });

                            $container.masonry( 'appended', $newElems, true );

                        });

                        loading.data("on", false);

                    }

                    loading.fadeOut();

                },

                "json"

            );

        }

    });

});

</script>

</body>



 thinkphp控制器





//初始化数据

public function index(){

　　$list = M('article')->order('id DESC')->limit(10)->select();

　　$this->assign('list', $list);

　　$this->display();

}

//获取下一栏数据

public function getDbMore(){

　　$last_id = $this->$_GET['last_id'];

　　$map['id'] = array('lt', $last_id);

　　$list = M('article')->where($map)->order('id DESC')->limit(6)->select();

　　$this->ajaxReturn($list);

}





　　点击下载jquery.masonry.min.js文件




thinphp下拉获取更多瀑布流效果
														
		
thinphp下拉获取更多瀑布流效果的更多相关文章
	

    

  1. 
WPF下制作的简单瀑布流效果
		
    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...
    
		
    2. 
						
  2. 
实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性、网格、瀑布流效果演示
		
    实现RecyclerView下拉刷新和上拉加载更多以及RecyclerView线性.网格.瀑布流效果演示 效果预览 实例APP 小米应用商店 使用方法 build.gradle文件 dependenc ...
    
		
    3. 
						
  3. 
Android UI 之WaterFall瀑布流效果
		
        所谓瀑布流效果,简单说就是宽度相同但是高度不同的一大堆图片,分成几列,然后像水流一样向下排列,并随着用户的上下滑动自动加载更多的图片内容.     语言描述比较抽象,具体效果看下面的截图:   ...
    
		
    4. 
						
  4. 
【前端】用jQuery实现瀑布流效果
		
    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
    
		
    5. 
						
  5. 
javascript瀑布流效果
		
    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
    
		
    6. 
						
  6. 
用jQuery实现瀑布流效果学习笔记
		
    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
    
		
    7. 
						
  7. 
手把手教你js原生瀑布流效果实现
		
    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
    
		
    8. 
						
  8. 
利用JS实现简单的瀑布流效果
		
    哈哈, 我又来啦, 在这一段时间里, 我简单的学习了一下javascript(JS), 虽然不是很懂啦, 但是我也简单的尝试着做了点小东西, 就比如现在流行的瀑布流效果, 经过我的努力终于成功的完成了 ...
    
		
    9. 
						
  9. 
css基础之 图片瀑布流布局：用CSS&plus;DIV等宽格子堆砌瀑布流效果 （一）
		
    <!doctype html> <html> <head> <meta charset="UTF-8"/> <title&gt ...
    
		
    10. 
		


随机推荐
	

    

  1. 
C&plus;&plus;用递归方式实现在对不更改随机数组的情况下查找最大值
			
    #include <iostream> #include <iomanip> #include <ctime> using namespace std; int M ...
    
			
    2. 
						
  2. 
奇怪的margin，padding，table
			
    为什么有的时候margin,padding不管用?写了float以后就管用了? 为什么table 不给width,就默认是100%,里面的td会平均分配teble的宽度,若你想给其中一些td宽度,剩下 ...
    
			
    3. 
						
  3. 
zhuan&colon;windows用一键安装包安装&lpar;推荐&rpar;-禅道
			
    访问地址:http://www.zentao.net/book/zentaopmshelp/76.html 一键安装包 解压缩必须 解压缩到根目录下面.
    
			
    4. 
						
  4. 
web工作方式，浏览网页&comma;打开浏览器，输入网址按下回车键，然后会显示出内容，这个过程是怎样的呢？
			
    以下内容摘自<Go Web编程>,介绍的通俗易懂. 我们平时浏览网页的时候,会打开浏览器,输入网址后按下回车键,然后就会显示出你想要浏览的内容.在这个看似简单的用户行为背后,到底隐藏了些什 ...
    
			
    5. 
						
  5. 
jQuery三种事件绑定方式&period;bind&lpar;&rpar;&comma;&period;live&lpar;&rpar;&comma;&period;delegate&lpar;&rpar;
			
    .bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
    
			
    6. 
						
  6. 
【 D3&period;js 入门系列 — 2&period;1 】 选择、插入、删除元素
			
    1. select 和 selectAll 的区别 在 D3 中,选择元素的函数有两个:select 和 selectAll,它们的使用非常重要.先说明一下它们的区别: select 是选择所有指定元 ...
    
			
    7. 
						
  7. 
PHP递归算法的一个实例 帮助理解
			
    递归函数为自调用函数,在函数体内直接或间接自己调用自己,但需要设置自调用的条件,若满足条件,则调用函数本身,若不满足则终止本函数的自调用,然后把目前流程的主控权交回给上一层函数来执行,可能这样给大家讲 ...
    
			
    8. 
						
  8. 
squid 正向代理 简单配置
			
    linux 正向同步 项目上web服务器不给访问外网,迁移服务器环境又太麻烦,决定给web服务器做正向代理,刚开始使用nginx,但是https代理一直不成功,后面大佬建议使用squid来达到相同目的 ...
    
			
    9. 
						
  9. 
加快Gradle的构建过程
			
    Gradle配置文件中加入守护进程 org.gradle.daemon=true 这个守护进程是在第一次编译时才开启进程进行编译,之后的编译将不再开启进程重新编译,这样以减小编译的速度
    
			
    10. 
						
  10. 
php生成mysql数据字典
			
    <?php /** * 生成mysql数据字典 */ // 配置数据库 $database = array(); $database['DB_HOST'] = '127.0.0.1'; $dat ...
    
			
    11. 
			
相关文章