瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据
瀑布流加载显示数据，在当下已经用的很普遍，尤其是我们在做网上商城时，在产品列表页面已经被普遍使用。
对于实现瀑布流布局的解决方案主要有以下两种方式：
1、对每一条显示数据使用绝对定位+浮动的方式，这样也会有一个问题----必须要知道每一条信息的具体高宽度
2、采用列布局，将每一条数据依次放置到每一列
其实两者的实现原理都是大同小异，现在我将针对第二种解决方案，用一个具体的事例来说明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body,ul,li{margin:0;margin:0;}
ul{list-style:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
/*瀑布流*/
/*.wallList{width:860px;}*/
.wallList li{float:left;display:inline;margin-right:16px;}
.wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
.wallList li a:hover{border-color:#f60;}
.wallList li .name{display:block;text-align:center;padding:8px 0;} .loadTips{text-align:center;padding:15px 0;}
</style>
</head>
<body>
<div class="wallList" id="wallList">
<ul class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p class="loadTips" id="loadTips">
19880902 <span>正在加载......</span></p>
</div>
</body>
</html>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
// 数据格式
var testJson = {
"status": 1,
"data": [
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片1" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片2" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片3" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片4" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片5" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x260/eee/fff", "width": 240, "height": 260, "name": "图片6" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片7" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片8" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x265/B5E61D/fff", "width": 240, "height": 265, "name": "图片9" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片10" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x310/B5E61D/fff", "width": 240, "height": 310, "name": "图片11" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片12" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x150/B5E61D/fff", "width": 240, "height": 150, "name": "图片13" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x165/B5E61D/fff", "width": 240, "height": 165, "name": "图片14" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x100/B5E61D/fff", "width": 240, "height": 100, "name": "图片15" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片16" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x225/B5E61D/fff", "width": 240, "height": 225, "name": "图片17" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片18" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片19" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片20" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片21" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片22" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片23" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片24" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片25" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片26" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片27" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片28" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片29" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片30" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片31" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片32" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片33" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片34" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片35" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片36" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片37" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片38" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片39" },
{ "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片40" }
]
} var wallPic = function () {
var $target = $('#wallList'),
$li = $target.find('li'),
$tips = $('#loadTips'),
oTop = 0, //滚动判断的值
row = 5, //列数
page = 1, //ajax请求的页码值
url = 'xxxx', //ajax请求地址
on_off = true; //插入结构的开关，防止ajax错误性多次加载数据 return {
fillData: function (callback) {
var _that = this;
on_off = false;
/* ajax
--------------------*/
// $.get(url,{ page:page,count:30 },function(json){
// if(json.status==1){
// _that.appendHTML(json.data);
// on_off = true;
// page++;
// }else{
// _that.loadedTips();
// }
// },'json'); /* 模拟测试-设置定时器模拟ajax请求数据
-----------------------*/
setTimeout(function () {
// 模拟终止
if (page == 5) {
_that.loadedTips();
return;
}
_that.appendHTML(testJson.data);
on_off = true;
page++;
}, 400);
},
appendHTML: function (data) {
var len = data.length,
n = 0;
for (; n < len; n++) { /*每次都将数据加载到高度最小的LI中---最终实现所有li高度都大致相当*/
var minHeight = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height(), $li.eq(3).height(), $li.eq(4).height()]);
for (var j = 0; j < 5; j++) {
if (minHeight == $li.eq(j).height()) {
$li[j].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + page * n + data[n].name + '</span></a>';
break;
}
}
/*依次均与的将数据分布到每一列中---将会出现有的li高度会很大
var k = 0;
n > (row - 1) ? k = n % row : k = n;
$li[k].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + data[n].name + '</span></a>';
*/
}
this.getOTop();
},
getOTop: function () {
oTop = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height()]) + $target.offset().top;
},
loadedTips: function () { //数据加载完毕
$('#loadTips').find('span').text('数据已加载完');
setTimeout(function () {
$('#loadTips').css({ 'visibility': 'hidden' });
}, 200);
// 解绑事件
$(window).unbind('scroll', $.proxy(this.scrollEvent, this));
},
scrollEvent: function () {//鼠标滚轮事件
if ($(document).scrollTop() + $(window).height() > oTop && on_off) {
this.fillData();
}
},
init: function () {//开始执行事件
this.fillData();
$(window).bind('scroll', $.proxy(this.scrollEvent, this));
}
}
} ();
wallPic.init();
</script>
瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- jquery 的ajax无刷新上传文件之后，页面还是会莫名的刷新-----解决办法
文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- 关于Ajax无刷新分页技术的一些研究 c#
关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...
- ajax无刷新上传和下载
关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...
- ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传
先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...
- ajax无刷新获取天气信息
浏览器由于安全方面的问题,禁止ajax跨域请求其他网站的数据,但是可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现: <?php header("conten ...
- Ajax无刷新提交
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ajax 无刷新分页
//ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...
随机推荐
- 解决MYSQL 8小时连接问题
之前在使用SSH开发项目的时候遇到了一个很奇怪的问题,部署到服务器上,运行一段时间后系统就崩溃了. 出现错误:org.hibernate.exception.JDBCConnectionExcepti ...
- SQL语句优化方法
1.1 注释使用 在语句中多写注释,注释不影响SQL语句的执行效率.增加代码的可读性. 1.2 对于事务的使用 尽量使事务处理达到最短,如果事务太长最好按功能将事务分开执行(如:可以让用户在界面上多几 ...
- NOI 2014 感想
NOI2014结束了,我卡线登上了领奖台... 这是我第一次NOI,我觉得我收获了很多东西: 1.考前心态不重要,重要的是实力 真正考试的时候是顾不得想其他事情的 2.测试数据是人出的!不是随机的!不 ...
- curl 使用简介
Libcurl使用介绍: 四个关键函数: 1. curl_easy_init() 初始化curl环境,新建curl对象,返回对象句柄,使用举例: CURL *handler = cur ...
- IIS7 性能（内存、CPU、当前请求耗时）监测
程序上线了,但运行过程中如果发现很CPU.内存异常,某些操作耗时,如何在生产环境中监测并查明原因呢,有以下几种工具(方式): 1.NProfiler,这是一个商业软件,有试用周期,可以监测包括Winf ...
- 类加载器classCloader
ref: http://blog.csdn.net/studyvcmfc/article/details/7720322 得复习一下深入java虚拟机 1.类加载器干啥的? 把 class文件加载到虚 ...
- Java笔记(二十二)……Collection集合
概述 为什么会出现集合类 面向对象语言对事物的体现都是以对象的形式,所以为了方便对多个对象的操作,就对对象进行存储,集合就是存储对象最常用的一种方式 数组和集合类同是容器,有何不同 数组虽然也可以存储 ...
- NOIP2003 侦探推理
题二 侦探推理 [问题描述] 明明同学最近迷上了侦探漫画<柯南>并沉醉于推理游戏之中,于是他召集了一群同学玩推理游戏.游戏的内容是这样的,明明的同学们先商量好由其中的一个人充当罪犯( ...
- codeforce 651B Beautiful Paintings
题意:后一个比前一个大就加一,问最大次数. #include<cstdio> #include<cstring> #include<algorithm> #incl ...
- 动态加载JS脚本的4种方法
实现OPOA(One Page One Application)时,必须使用动态加载js. 也就是在用户选择某个菜单项后,再动态加载对应的全部js到客户端. 动态加载js的情况很多啊,比如解决ajax ...