jquery瀑布流效果demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>waterfall</title>
<link href="css/waterfall.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/json.js"></script>
<script type="text/javascript" src="js/waterfall.js"></script>
</head>
<body>
<div id="warp" class="warp">
<!--内容区！！！！-->
</div>
<a href="javascript:;" id="more" class="more">Loading.....</a>
</body>
</html>
临时模拟的一段json的数据，里面的图片都是采用别人的，图片可以随便换的；
var json={
"pic":[
"http://www.ilookmm.com/waterfall/images/P_000.jpg",
"http://www.ilookmm.com/waterfall/images/P_001.jpg",
"http://www.ilookmm.com/waterfall/images/P_002.jpg",
"http://www.ilookmm.com/waterfall/images/P_003.jpg",
"http://www.ilookmm.com/waterfall/images/P_004.jpg",
"http://www.ilookmm.com/waterfall/images/P_005.jpg",
"http://www.ilookmm.com/waterfall/images/P_006.jpg",
"http://www.ilookmm.com/waterfall/images/P_007.jpg",
"http://www.ilookmm.com/waterfall/images/P_008.jpg",
"http://www.ilookmm.com/waterfall/images/P_009.jpg",
"http://www.ilookmm.com/waterfall/images/P_010.jpg",
"http://www.ilookmm.com/waterfall/images/P_011.jpg",
"http://www.ilookmm.com/waterfall/images/P_012.jpg",
"http://www.ilookmm.com/waterfall/images/P_013.jpg",
"http://www.ilookmm.com/waterfall/images/P_014.jpg",
"http://www.ilookmm.com/waterfall/images/P_015.jpg",
"http://www.ilookmm.com/waterfall/images/P_016.jpg",
"http://www.ilookmm.com/waterfall/images/P_017.jpg",
"http://www.ilookmm.com/waterfall/images/P_018.jpg",
"http://www.ilookmm.com/waterfall/images/P_019.jpg",
"http://www.ilookmm.com/waterfall/images/P_020.jpg",
"http://www.ilookmm.com/waterfall/images/P_021.jpg",
"http://www.ilookmm.com/waterfall/images/P_022.jpg",
"http://www.ilookmm.com/waterfall/images/P_023.jpg",
"http://www.ilookmm.com/waterfall/images/P_024.jpg",
"http://www.ilookmm.com/waterfall/images/P_025.jpg",
"http://www.ilookmm.com/waterfall/images/P_026.jpg",
"http://www.ilookmm.com/waterfall/images/P_027.jpg",
"http://www.ilookmm.com/waterfall/images/P_028.jpg",
"http://www.ilookmm.com/waterfall/images/P_029.jpg",
"http://www.ilookmm.com/waterfall/images/P_030.jpg",
"http://www.ilookmm.com/waterfall/images/P_031.jpg",
"http://www.ilookmm.com/waterfall/images/P_032.jpg",
"http://www.ilookmm.com/waterfall/images/P_033.jpg",
"http://www.ilookmm.com/waterfall/images/P_034.jpg",
"http://www.ilookmm.com/waterfall/images/P_035.jpg",
"http://www.ilookmm.com/waterfall/images/P_036.jpg",
"http://www.ilookmm.com/waterfall/images/P_037.jpg",
"http://www.ilookmm.com/waterfall/images/P_038.jpg",
"http://www.ilookmm.com/waterfall/images/P_039.jpg",
"http://www.ilookmm.com/waterfall/images/P_040.jpg",
"http://www.ilookmm.com/waterfall/images/P_041.jpg",
"http://www.ilookmm.com/waterfall/images/P_042.jpg",
"http://www.ilookmm.com/waterfall/images/P_043.jpg",
"http://www.ilookmm.com/waterfall/images/P_044.jpg",
"http://www.ilookmm.com/waterfall/images/P_045.jpg",
"http://www.ilookmm.com/waterfall/images/P_046.jpg",
"http://www.ilookmm.com/waterfall/images/P_047.jpg",
"http://www.ilookmm.com/waterfall/images/P_048.jpg",
"http://www.ilookmm.com/waterfall/images/P_049.jpg",
"http://www.ilookmm.com/waterfall/images/P_050.jpg",
"http://www.ilookmm.com/waterfall/images/P_051.jpg",
"http://www.ilookmm.com/waterfall/images/P_052.jpg",
"http://www.ilookmm.com/waterfall/images/P_053.jpg",
"http://www.ilookmm.com/waterfall/images/P_054.jpg",
"http://www.ilookmm.com/waterfall/images/P_055.jpg",
"http://www.ilookmm.com/waterfall/images/P_056.jpg",
"http://www.ilookmm.com/waterfall/images/P_057.jpg",
"http://www.ilookmm.com/waterfall/images/P_058.jpg",
"http://www.ilookmm.com/waterfall/images/P_059.jpg",
"http://www.ilookmm.com/waterfall/images/P_060.jpg",
"http://www.ilookmm.com/waterfall/images/P_061.jpg",
"http://www.ilookmm.com/waterfall/images/P_062.jpg",
"http://www.ilookmm.com/waterfall/images/P_063.jpg",
"http://www.ilookmm.com/waterfall/images/P_064.jpg",
"http://www.ilookmm.com/waterfall/images/P_065.jpg",
"http://www.ilookmm.com/waterfall/images/P_066.jpg",
"http://www.ilookmm.com/waterfall/images/P_067.jpg",
"http://www.ilookmm.com/waterfall/images/P_068.jpg",
"http://www.ilookmm.com/waterfall/images/P_069.jpg",
"http://www.ilookmm.com/waterfall/images/P_070.jpg",
"http://www.ilookmm.com/waterfall/images/P_071.jpg",
"http://www.ilookmm.com/waterfall/images/P_072.jpg",
"http://www.ilookmm.com/waterfall/images/P_073.jpg",
"http://www.ilookmm.com/waterfall/images/P_074.jpg",
"http://www.ilookmm.com/waterfall/images/P_075.jpg",
"http://www.ilookmm.com/waterfall/images/P_076.jpg",
"http://www.ilookmm.com/waterfall/images/P_077.jpg",
"http://www.ilookmm.com/waterfall/images/P_078.jpg",
"http://www.ilookmm.com/waterfall/images/P_079.jpg",
"http://www.ilookmm.com/waterfall/images/P_080.jpg",
"http://www.ilookmm.com/waterfall/images/P_081.jpg",
"http://www.ilookmm.com/waterfall/images/P_082.jpg",
"http://www.ilookmm.com/waterfall/images/P_083.jpg",
"http://www.ilookmm.com/waterfall/images/P_084.jpg",
"http://www.ilookmm.com/waterfall/images/P_085.jpg",
"http://www.ilookmm.com/waterfall/images/P_086.jpg",
"http://www.ilookmm.com/waterfall/images/P_087.jpg",
"http://www.ilookmm.com/waterfall/images/P_088.jpg",
"http://www.ilookmm.com/waterfall/images/P_089.jpg",
"http://www.ilookmm.com/waterfall/images/P_090.jpg",
"http://www.ilookmm.com/waterfall/images/P_091.jpg",
"http://www.ilookmm.com/waterfall/images/P_092.jpg",
"http://www.ilookmm.com/waterfall/images/P_093.jpg",
"http://www.ilookmm.com/waterfall/images/P_094.jpg",
"http://www.ilookmm.com/waterfall/images/P_095.jpg",
"http://www.ilookmm.com/waterfall/images/P_096.jpg",
"http://www.ilookmm.com/waterfall/images/P_097.jpg",
"http://www.ilookmm.com/waterfall/images/P_098.jpg",
"http://www.ilookmm.com/waterfall/images/P_099.jpg",
"http://www.ilookmm.com/waterfall/images/P_100.jpg"
],
"hei":[
"288",
"288",
"288",
"129",
"284",
"253",
"245",
"343",
"238",
"159",
"289",
"282",
"127",
"144",
"269",
"282",
"142",
"279",
"289",
"262",
"288",
"184",
"192",
"145",
"129",
"290",
"127",
"144",
"192",
"288",
"270",
"144",
"273",
"244",
"168",
"243",
"192",
"138",
"144",
"256",
"128",
"192",
"190",
"190",
"225",
"119",
"269",
"264",
"264",
"285",
"272",
"126",
"281",
"152",
"236",
"265",
"287",
"269",
"275",
"125",
"285",
"190",
"314",
"253",
"119",
"264",
"274",
"274",
"285",
"288",
"288",
"129",
"184",
"253",
"245",
"343",
"238",
"159",
"289",
"127",
"282",
"144",
"269",
"282",
"142",
"279",
"289",
"262",
"288",
"184",
"190",
"145",
"129",
"290",
"127",
"144",
"192",
"288",
"270",
"144",
"273"
]
}
css代码：
@charset "utf-8";
/**
* User: yao
* Email: yao@thinksky.hk,651680272@qq.com
* Version:1.0
* note:图片是别人滴，代码是原创滴！！！
*/
*{padding: 0;margin: 0;}
img{display: block;border: 0 none;}
ul,ol{list-style: none;}
*html{background-image:url(about:blank);background-attachment:fixed;}/*这个html，解决页面滚动时出现抖动的现象*/
.warp{margin: 0 auto;position: relative;}
.pic{width: 218px;border:1px solid silver;background: #fffafa;box-shadow: 0 0 5px silver;position: absolute;left: 0;top: 0;}
.pic_link{display: block;width: 192px;margin: 10px auto;}
.more{background:#e64545;opacity:0.5;filter:alpha(opacity=50);display: none;width:100%;height: 35px;text-align: center;color:#fff;font: 20px/35px "Arial";text-decoration: none;position: fixed;_position:absolute;bottom:0;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
javascript代码：
/**
* User: yao
* Email: yao@thinksky.hk,651680272@qq.com
* Version:1.0
* note:图片是别人滴，代码是原创滴！！！
*/
$(function(){
var m=10;
var n=220;
var pics;
var links;
var hei_arr;
var urls="waterfall.json";
var warp=$("#warp");
var more=$("#more");
var do_width=$(window).width();
var cols=parseInt(do_width/(m+n));//获取浏览器当前宽度应该排的列数;
algorithm(cols);
$(window).resize(function(){
var do_width=$(window).width();
var cols=parseInt(do_width/(m+n));//获取浏览器当前宽度应该排的列数;
var wrap_width=cols*(m+n)+m;
warp.css({"width":wrap_width});
pics=$(".pic");
links=$(".pic_link");
for(var i=0;i<pics.length;i++){
links.eq(i).animate({"height":hei_arr[i]});
if(i<cols){
pics.eq(i).animate({"left":m+(m+n)*i,"top":"0px"});
}else{
var les=parseInt(i/cols);
var left=m+(m+n)*(i-les*cols);
var all_height=0;
var mr_height=m*les;//外补丁总高度
for(var j=0;j<les;j++){
all_height+=pics.eq(i-cols*(j+1)).height();//当前列的所有图片高度（算法叠加）
}
var top=all_height+mr_height;
pics.eq(i).animate({"left":left,"top":top});
}
}
more.hide();
});
$(window).scroll(function(){
var do_width=$(window).width();
var cols=parseInt(do_width/(m+n));//获取浏览器当前宽度应该排的列数;
//模拟json数据用的方法
if ($(document).height() - $(this).scrollTop() - $(this).height()<=0){
pics=$(".pic");
var pics_len=pics.length;
more.fadeIn();
var html="";
var remain_pics=json.pic.length-pics_len;
if(remain_pics<10){//判断数据库里面有多少张图片没load,
for(var i=pics_len;i<pics_len+remain_pics;i++){
html+="<div class='pic'><a href='javascript:;' class='pic_link'><img src="+json.pic[i]+"></a></div>";
more.fadeIn().html("Loading complete！！");
}
}else{
for(var i=pics_len;i<pics_len+10;i++){
html+="<div class='pic'><a href='javascript:;' class='pic_link'><img src="+json.pic[i]+"></a></div>";
more.fadeOut();
}
}
warp.append(html);
pics=$(".pic");
links=$(".pic_link");
hei_arr=json.hei;
for(var i=pics_len;i<pics.length;i++){
var les=parseInt(i/cols);
var left=m+(m+n)*(i-les*cols);
var all_height=0;
var mr_height=3*m*les;//外补丁总高度
for(var j=0;j<les;j++){
all_height+=parseInt(hei_arr[i-cols*(j+1)]);//当前列的所有图片高度（算法叠加）
}
var top=all_height+mr_height;
links.eq(i).animate({"height":hei_arr[i]});
pics.eq(i).animate({"left":left,"top":top});
}
}
//实际项目中用的方法
/* if ($(document).height() - $(this).scrollTop() - $(this).height()<=0){
pics=$(".pic");
var pics_len=pics.length;
$.ajax({
type:"post",
url:urls,
dataType:"json",
success:function(data){
more.fadeIn();
var html="";
$("#demo").html(data.pic.length-pics_len);
var remain_pics=data.pic.length-pics_len;
if(remain_pics<10){//判断数据库里面有多少张图片没load,
for(var i=pics_len;i<pics_len+remain_pics;i++){
html+="<div class='pic'><a href='javascript:;' class='pic_link'><img src="+data.pic[i]+"></a></div>";
more.fadeIn().html("Loading complete！！");
}
}else{
for(var i=pics_len;i<pics_len+10;i++){
html+="<div class='pic'><a href='javascript:;' class='pic_link'><img src="+data.pic[i]+"></a></div>";
more.fadeOut();
}
}
warp.append(html);
pics=$(".pic");
links=$(".pic_link");
hei_arr=data.hei;
for(var i=pics_len;i<pics.length;i++){
var les=parseInt(i/cols);
var left=m+(m+n)*(i-les*cols);
var all_height=0;
var mr_height=3*m*les;//外补丁总高度
for(var j=0;j<les;j++){
all_height+=parseInt(hei_arr[i-cols*(j+1)]);//当前列的所有图片高度（算法叠加）
}
var top=all_height+mr_height;
links.eq(i).animate({"height":hei_arr[i]});
pics.eq(i).animate({"left":left,"top":top});
}
}
});
}*/
});
function algorithm(cols){
var wrap_width=cols*(m+n)+m;
warp.css({"width":wrap_width});
//模拟json数据用的方法
var html="";
for(var i=0;i<24;i++){
html+="<div class='pic'><a href='javascript:;' class='pic_link'><img src="+json.pic[i]+"></a></div>";
}
warp.append(html);
pics=$(".pic");
links=$(".pic_link");
hei_arr=json.hei;
for(var i=0;i<pics.length;i++){
links.eq(i).animate({"height":hei_arr[i]});
if(i<cols){
pics.eq(i).animate({"left":m+(m+n)*i,"top":"0px"});
}else{
var les=parseInt(i/cols);
var left=m+(m+n)*(i-les*cols);
var all_height=0;
var mr_height=3*m*les;//外补丁总高度
for(var j=0;j<les;j++){
all_height+=parseInt(hei_arr[i-cols*(j+1)]);//当前列的所有图片高度（算法叠加）
}
var top=all_height+mr_height;
pics.eq(i).animate({"left":left,"top":top});
}
}
//实际项目中用的方法
/* $.ajax({
type:"post",
url:urls,
dataType:"json",
success:function(data){
var html="";
for(var i=0;i<24;i++){
html+="<div class='pic'><a href='javascript:;' class='pic_link'><img src="+data.pic[i]+"></a></div>";
}
warp.append(html);
pics=$(".pic");
links=$(".pic_link");
hei_arr=data.hei;
for(var i=0;i<pics.length;i++){
links.eq(i).animate({"height":hei_arr[i]});
if(i<cols){
pics.eq(i).animate({"left":m+(m+n)*i,"top":"0px"});
}else{
var les=parseInt(i/cols);
var left=m+(m+n)*(i-les*cols);
var all_height=0;
var mr_height=3*m*les;//外补丁总高度
for(var j=0;j<les;j++){
all_height+=parseInt(hei_arr[i-cols*(j+1)]);//当前列的所有图片高度（算法叠加）
}
var top=all_height+mr_height;
pics.eq(i).animate({"left":left,"top":top});
}
}
}
});*/
}
});
线上地址：http://www.ilookmm.com/waterfall/index.html
欢迎各位指导；
