流动布局生成无限制图片加载
工程下载：http://download.****.net/detail/cometwo/9357879
工程目录，主要是文件夹images里的9张图片1.jpg--------9.jpg,还有就是下面的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
#box{width: 888px; margin:0 auto; overflow: hidden;}
ul{width:200px; border:1px solid red; float: left; margin:10px;}
ul li{ width:200px; height:150px; background:#ccc; margin:10px 0;}
</style>
<script type="text/javascript">
function rnd(n,m){
return parseInt(n+Math.random()*(m-n)); //生成随机数
}
function createLi(){
var oLi = document.createElement('li');
oLi.style.height=rnd(150,301)+'px'; //随机高度
oLi.style.background='rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')'; //随机颜色
//oLi.style.background="url(img/" + Math.round(Math.random() * 8 + 1) + ".jpg)";
return oLi;
}
window.onload=function(){
var oBox = document.body.children[0]; //找到DIV
var aUl = oBox.children; //找到所有的ul
function createLi20(){
for(var i=0;i<20;i++){ //一次性创建20个
var oLi = createLi(); //生成随机高度的DIV
var arr = [];
for(var j=0;j<aUl.length;j++){
arr.push(aUl[j]); //向数组添加元素，push添加元素
}
arr.sort(function(u1,u2){ //sort() 方法用于对数组的元素进行排序。
return u1.offsetHeight-u2.offsetHeight; //offsetHeight = 内容可视区域的高度+ 滚动条 + 边框
});
arr[0].appendChild(oLi); //添加子元素
}
}
createLi20();
window.onscroll=function(){ //onscroll 事件在元素滚动条在滚动时触发。
var scrollT = document.documentElement.scorllTop||document.body.scrollTop; //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
var winH = document.documentElement.clientHeight; //clientHeight:可见区域的宽度,不包括boder的宽度
var scrollBottom = scrollT+winH;
if(scrollBottom>=document.body.scrollHeight-500){
createLi20();
}
};
};
</script>
</head>
<body>
<div id="box">
<ul></ul> <!--四列-->
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>