实现原理很简单
一、算出每行最多存放多少张图片，赋值给最外层盒子的宽度
二、图片采用绝对定位，通过js来改变top值，当前页面的图片直接在html中设置完毕
三、创建一个数组存放当前所有图片top值，找到最小top值从而确定下一行第一章图片位置，以此类推...
四、触发scroll事件时重新渲染页面
这里图片事先准备好，也可以http跨域请求数据~
下面是代码部分
css样式：
body,div,img{margin:0;padding:0;} #main{ margin:0 auto; position:relative; } #main .wrap{ padding:10px 0 0 10px; position:absolute; } #main .box{ border:1px solid #666; border-radius:4px; width:250px; padding:5px; } #main .box img{ width:250px; }
html结构：
<div id="main"> <div class="wrap"> <div class="box"> <img src="images/1.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/2.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/3.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/4.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/5.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/6.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/7.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/8.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/9.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/10.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/11.jpg"> </div> </div> <div class="wrap"> <div class="box"> <img src="images/12.jpg"> </div> </div> </div>
js代码：
//页面加载完毕渲染
window.onload = function(){
waterFall("#main",".wrap");
};
window.onscroll = function(){
//储存图片
var arrImg = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg",
"images/7.jpg",
"images/8.jpg",
"images/9.jpg",
"images/10.jpg",
"images/11.jpg",
"images/12.jpg"
];
for(var i=0;i<arrImg.length;i++){
$("#main").append($("<div class=‘wrap‘><div class=‘box‘><img src="+arrImg[i]+"></div></div>"));
}
waterFall("#main",".wrap");
}
//适应不同尺寸窗口大小
/*
@param1 最外层父级元素id
@param2 图片父级元素类名
*/
function waterFall(Id,className){
var jqId = $(Id),
jqClass = $(className),
pageW = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth, //当前窗口宽度
colNum = Math.floor(pageW/jqClass.innerWidth()), //每行列数
mainW = colNum*(jqClass.innerWidth()); //每行总宽度
jqId.css("width",mainW);
//设置top值
var arrT = [];
jqClass.each(function(e){
if(e<colNum){
jqClass.eq(e).css("left",jqClass.innerWidth()*e);
arrT.push(jqClass.eq(e).innerHeight());
}else{
var minH = Math.min.apply(null,arrT), //获取当前数组最小值及对应索引值
index = arrT.indexOf(minH),
minL = jqClass.eq(index).css("left");
jqClass.eq(e).css({
"top":minH,
"left":minL,
});
arrT[index] = minH + jqClass.eq(e).innerHeight();
}
})
};
原文：http://www.cnblogs.com/wz950116/p/6623420.html