分析：瀑布流，做法有2种
（1）绝对定位方案：每个单元格设置为绝对定位，通过计算，分别设置 top,left 即可实现
（2）浮动方案：弄N列布局（浮动），然后图片数据，按顺序依次插入，如N为3列 ，第一张图片插入到第一列，第二张图片插入到第二列，第三张图片插入到第三列，第四张图片插入到第一列........这样循环插入（不能自适应）
CSS与HTML代码：
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-b
ottom: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;}
":"图片1"},
{"href":"http:xxxxxxx","src":"
":"图片2"},"src":"
":"图片3"},"src":"":"图片4"},"src":"
":"图片5"},"src":"":"图片6"},"src":"
":"图片7"},"src":"":"图片8"},"src":"
":"图片9"},"src":"":"图片10"},"src":"
":"图片11"},"src":"":"图片12"},"src":"
":"图片13"},"src":"":"图片14"},"src":"
":"图片15"},"name":"
图片16"},"src":"
":"图片17"},"name":"
图片18"},"name":"
图片19"},"name":"
图片20"},"name":"
图片21"},"name":"
图片22"},"name":"
图片23"},"name":"
图片24"},"name":"
图片25"},"src":"
":"图片26"},"name":"
图片27"},"name":"
图片28"},"src":"
":"图片29"},"name":"
图片30"}
]
}
var wallPic = function(){
var $target = $('#wallList'),
$li = $target.find('li'),
$tips = $('#loadTips'),
oTop = 0,//滚动判断的值
row = 3,//列数
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==3){
_that.loadedTips();
return;
}
_that.appendHTML(testJson.data);
on_off = true;
page++;
},400);
},
appendHTML:function(data){
var len = data.length,
n = 0;
for(;n
(row-1)?k=n%row:k=n;
$li[k].innerHTML += '';
}
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',this));
}
}
}();
wallPic.init();
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
