分析：瀑布流，做法有2种
（1）绝对定位方案：每个单元格设置为绝对定位，通过计算，分别设置 top , left 即可实现
（2）浮动方案：弄n列布局（浮动），然后图片数据，按顺序依次插入，如n为3列 ，第一张图片插入到第一列，第二张图片插入到第二列，第三张图片插入到第三列，第四张图片插入到第一列........这样循环插入（不能自适应）
css与html代码：
复制代码 代码如下:
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;}
复制代码 代码如下:
正在加载......
使用jquery实现，大概思路如下：
（1）获取n列中 最小的高度值，js提供的api是math.min()，但这个api最多只能传入 2 个参数，所以就需要用aplly来扩展，math.min.apply(null,[xxx,xxx,xxxx,xxxx])
（2）给 window 绑定 scroll事件，下拉的时候获取 $(document).scrolltop() ， 当 $(document).scrolltop() 大于 最小的高度值，就ajax请求url，如果有数据，就往页面插入html结构，没有则提示 “加载完”，然后window解绑此事件
复制代码 代码如下:
// 数据格式
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/240x245/259/fff,width:240,height:245,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 var k = 0;
n>(row-1)?k=n%row:k=n;
$li[k].innerhtml += ''+data[n].name+'';
}
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();