瀑布流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 ...
随机推荐
- Document字段发生变化后，报的错
2016-10-11 15:27:47,828 [ERROR] [main] SpringApplication:838 - Application startup failedorg.springf ...
- ActionBar官方教程(8)ShareActionProvider与自定义操作项提供器
Adding an Action Provider Similar to an action view, an action provider replaces an action button wi ...
- lib 合并
方法1: 命令如下:lib.exe lib1.lib lib2.lib ... /out:hw.lib 另一种合并的方法: 思路:lib.exe 可以把lib文件里的obj文件取出来,然后把这些obj ...
- IPv6 tutorial 4 IPv6 address syntax
https://4sysops.com/archives/ipv6-tutorial-part-4-ipv6-address-syntax/ Now that you know about the n ...
- poj1177Picture（线段树-周长并）
链接 神奇的扫描线啊 估计之前刷面积并的时候太急了 没来得及理解 .. 有一大段代码是与面积并一模一样的 都是离散化 更新 面积并是扫描的x 这次也一样 因为周长只算外围的 所以扫描到一条x边时 要 ...
- 做一个自己的最小Linux系统
一.前言 Linux操作系统至1991.10.5号诞生以来,就源其开源性和自由性得到了很多技术大牛的青睐,每个Linux爱好者都为其贡献了自己的一份力,不管是在Linux内核还是开源软件等方面,都为 ...
- jquery封装的选项卡
ul,li,div{ margin:; padding:;} ul,li{ list-style:none;} .tab_wrap{ width:450px; margin: auto 50px; o ...
- javascript 中concat与push的区别
1. push 遇到数组参数时,把整个数组参数作为一个元素:而 concat 则是拆开数组参数,一个元素一个元素地加进去. 2. push 直接改变当前数组:concat 不改变当前数组. 总结:如果 ...
- 学习Python前序
最近一直在学习有关Python语言.回顾的时候,发现学习过程中的有些东西被遗漏了.故记录在此......加深记忆,方便查找. The reason: 语言如此多,why choose Pyth ...
- andriod and linux kernel启动流程
虽然这里的Arm Linux kernel前面加上了Android,但实际上还是和普遍Arm linux kernel启动的过程一样的,这里只是结合一下Android的Makefile,讲一下boot ...