<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{background:url(img/79.jpg);position:absolute}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var aDiv=oDiv.getElementsByTagName('div');
var arr = [ 'red', 'yellow', 'blue' ];
var str = '';
for( var i=0; i<6; i++){
for ( var j=0; j<10; j++){
str+="<div style='background-position:"+ (-j*48) +'px '+(-i*50)+"px;50px;height:50px;position:absolute;top:"+i*52+"px;left:"+j*52+"px;'></div>";
};
};
oDiv.innerHTML=str;
//横向6排，纵向10排，每次在执行完一次外面的循环后条件满足就会执行里面的循环，里面的循环的DIV要想实现横向布局就需要定位，top值是i,left值是j.
//算好每张图片需要背景定位的数值。
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>