java ajax瀑布流,Ajax 实现滚动加载瀑布流 详解

/**

* 需求：

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

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

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

*/

一、html代码

加载更多

二、js代码

/**

* 需求：

* 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);

}

});

})

三、模板引擎

四、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条

// 10-9

// 210-19

// 320-29

// 430-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);

?>