流动布局生成无限制图片加载

最新推荐文章于 2020-12-26 17:39:41 发布

最骚的就是你

最新推荐文章于 2020-12-26 17:39:41 发布

阅读量800

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/libin_1/article/details/50316427

版权

web前端学习专栏收录该内容

301 篇文章 2 订阅

订阅专栏

工程下载：http://download.csdn.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.οnlοad=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.οnscrοll=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>

工程下载：http://download.csdn.net/detail/cometwo/9357879