/**

* 需求：

* 1、页面加载完成后 请求服务器 获取第一屏的数据

* 2、点击加载更多 请求服务器 获取下一屏的数据

* 3、当页面滚动到一定的高度时 请求服务器 获取下一屏的数据 渲染在页面中

*/

一、html代码

<div class="wrapper">
        <div class="items">

        </div>
        <p class="tips">加载更多</p>
</div>

<!-- 引入jquery插件 -->
<script src="js/jquery.min.js"></script>
<!-- 引入封装好的瀑布流插件 -->
<script src="js/jquery.waterFall.js"></script>
<!-- 引入模板引擎 -->
<script src="js/template-native.js"></script>

二、js代码

<script>
        /**
         *  需求：
         *  1、页面加载完成后 请求服务器 获取第一屏的数据
         *  2、点击加载更多 请求服务器 获取下一屏的数据
         *  3、当页面滚动到一定的高度时 请求服务器 获取下一屏的数据 渲染在页面中
         */

        $(function () {
            //由于需要多次调用$.ajax 方法 多次请求服务器 所以可以封装一个请求服务器的方法
            //index 表示： 要获取数据的页码

            function getData(index) {
                $.ajax({
                    type:'post',
                    url:'data.php',
                    data:{page:index},
                    dataType:'json',
                    beforeSend:function () { //请求发送之前回调函数
                        //如果正在请求 下次点击无效的
                        if($('.tips').hasClass('loading')){
                            return false;
                        }
                        //请求发送前改变按钮的样式
                        $('.tips').addClass('loading').text('正在加载...');
                    },
                    success:function (info) { //请求成功返回
                        //准备数据
                        //准备模板
                        //组装数据、模板
                        var html = template('tmp',info);
                        //追加到页面中
                        $('.items').append(html);
                        //使用瀑布流插件进行布局
                        $('.items').waterFall();
                        //缓存下一页 页码
                        $('.tips').attr('data-page',info.page);
                    },
                    error:function () { //请求出错回调函数

                    },
                    complete:function () { //请求完成时调用
                        //加载完成 按钮样式恢复
                        $('.tips').removeClass('loading').text('加载更多');
                    }
                });
            }

            //调用函数
            getData(1);

            //第二个需求 点击按钮加载下一页
            $('.tips').click(function () {
                //需要获取下一页的页码
                var page = $(this).attr('data-page');
                //调用函数
                getData(page);
            });

            //第三个需求 当页面距离底部一定距离时 加载下一屏内容
            $(window).scroll(function () {
                //获取需要的宽高
                // 底部的距离 = $(items).height+$(items).offset().top-$(window).scrollTop-$(window).height();
                var wHeight = $(window).height();
                var scrollTop = $(window).scrollTop();

                var iHeight = $('.items').height();
                var iTop = $('.items').offset().top;

                var top = iHeight + iTop - wHeight - scrollTop;

                //当items 距离浏览器底部的距离小于 100时 开始加载下一屏内容
                if(top<100){
                    //获取下一页页码
                    var page = $('.tips').attr('data-page');
                    //调用函数
                    getData(page);
                }
            });
        })





</script>

三、模板引擎

<script type="text/template" id="tmp">

        <% for(var i=0;i<items.length;i++){ %>
            <div class="item">
                <img src="<%=%20items[i].path%20%>" alt="">
                <p><%= items[i].text %></p>
            </div>
        <% } %>

</script>

四、php模拟数据库部分

<?php

	header('Content-Type:application/json; charset=utf-8');

	// 读取json数据
	// 正常工作中是从数据库里取的
	$data = file_get_contents('./data.json');

	// 转换成PHP数组
	$data = json_decode($data);

	// 根据页码计算offset
	$page = $_POST['page'];

	// 每页10条
	// 1	0-9
	// 2	10-19
	// 3	20-29
	// 4	30-39

	// (page - 1) * 10 计算得到每一页的第1条数据


	// 每页的数据计算每页数据的"起点""
	$offset = ($page - 1) * 10;

	// 从数组取出一部分数据

	// 截取10条数据
	$result = array_slice($data, $offset, 10);

	// 翻页
	$page++;

	// 放到数级组里
	$arr = array (
		'page'=> $page,
		'items'=>$result
	);

	echo json_encode($arr);

	// echo json_encode(array('page'=>$page, 'items'=>$result));

	sleep(1);

?>