自己找一些宽度一样的图片插入就可以看到效果了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
}
#wrap div{
position: absolute;
border: 1px solid #cdcdcd;
}
img{
display: block;
border: 0;
}
</style>
</head>
<body>
<div id="wrap">
<div><img src="img2/1.jpg"/></div>
<div><img src="img2/2.jpg"/></div>
<div><img src="img2/3.jpg"/></div>
<div><img src="img2/4.jpg"/></div>
<div><img src="img2/5.jpg"/></div>
<div><img src="img2/6.jpg"/></div>
<div><img src="img2/7.jpg"/></div>
<div><img src="img2/8.jpg"/></div>
<div><img src="img2/9.jpg"/></div>
<div><img src="img2/3.jpg"/></div>
<div><img src="img2/2.jpg"/></div>
<div><img src="img2/6.jpg"/></div>
</div>
<script type="text/javascript">
var data = ["img2/1.jpg","img2/5.jpg","img2/9.jpg"];
window.onload = window.onresize = function(){
var oWrap = document.getElementById("wrap");
//整个画面宽度
var oAllWidth = oWrap.offsetWidth;
var oDiv = oWrap.children;
//每张图片宽度
var oPerWidth = oDiv[0].offsetWidth;
//图片的margin-top和margin-left值
var mt = ml = 10;
//求第一行所能容纳的列数
var cols = Math.floor(oAllWidth/(oPerWidth+ml));
//第一行排列
var arr = [];
for(var i=0;i<cols;i++){
oDiv[i].style.top = 0;
oDiv[i].style.left = i*(oPerWidth+ml)+"px";
//将第一行每列的高度值存到数组中
arr.push(oDiv[i].offsetHeight);
}
//排剩下的图片
comPos(cols);
//剩下填充的图片定位高度是最短的那一列的高度+margintop值
//定位left值是最短那一列的left值
function comPos(startWay){
for(var i=startWay;i<oDiv.length;i++){
oDiv[i].style.top = arr[minIndex(arr)]+mt+"px";
oDiv[i].style.left = oDiv[minIndex(arr)].style.left;
//更新数组中各列高度
arr[minIndex(arr)] += oDiv[i].offsetHeight + mt;
}
}
//找最小高度索引
function minIndex(arr){
var minValue = Math.min.apply(null,arr);
var minIndex = arr.indexOf(minValue);
return minIndex;
}
//滚动条滚动,不停地插入图片到最短的那一列下方
var ch = document.documentElement.clientHeight;
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(arr[minIndex(arr)]<ch+scrollTop){
var str = "";
for(var i=0;i<data.length;i++){
str+="<div><img src="+ data[i] +"></div>";
}
oWrap.innerHTML +=str;
//从div最末尾添加图片
comPos(oDiv.length-data.length);
}
}
}
</script>
</body>
</html>