带有预加载的瀑布流
2017-02-22 本文已影响0人
小姜先森o0O
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带有预加载的瀑布流</title>
//css样式随心情写写就好啦
<style>
*{
margin: 0;
padding: 0;
box-sizing:border-box;
list-style: none;
}
body{
padding-top: 0.1px;
background: #1E6262;
}
#thead{
width: 100%;
height: 50px;
line-height: 50px;
background: #fff;
text-align: center;
position: fixed;
z-index: 1;
box-shadow: 1px 1px 5px #000;
}
#fbody{
width: 1000px;
margin:0 auto;
margin-top:50px;
}
#fbody ul{
width:220px;
margin:10px 15px;
float: left;
overflow: hidden;
}
@keyframes mmmm{
0%{transform:rotateZ(0deg)}
100%{transform:rotateZ(360deg)}
}
</style>
//开始写js代码啦
<script>
window.onload = function(){
//获取到当前界面中的所有ul
var uls = document.querySelectorAll('ul');
//执行创建li的函数;
createLi();
//当浏览器滚动条滚动时触发事件...
window.onscroll = function(){
//获取浏览器窗口兼容写法(你也可以不写)
var dody = document.documentElement || document.body;
//获取浏览器高度和可视化高度 ,他们的差值就是浏览器滚过手起来的高度
var max = dody.offsetHeight-dody.clientHeight;
//获取浏览器滑块滚过的高度
var height = document.documentElement.scrollTop || document.body.scrollTop;
//判断浏览器卷起来的高度和滑块滚过的高度
if(height >= max){
//相同就在执行一遍创建li函数;
createLi();
}
}
//这里就是创建li的函数啦
function createLi(){
//让它创建20遍(当然你也可以随便弄啦);
for (var i = 0; i < 20; i++) {
//创建li标签
var li = document.createElement('li');
//给li动态加样式--------------
li.style.width = "100%";
li.style.height = randomFn(300,500)+"px";
li.style.textAlign = 'center';
li.style.marginTop = "15px";
li.style.borderRadius = '50px';
li.style.border = "6px solid #fff"
li.style.overflow = "hidden";
li.style.boxShadow = "1px 4px 4px #000";
li.style.background = "#fff";
//给li动态加样式--------------
//调用添加图片函数
creataImg(li,"https://unsplash.it/220/"+parseInt(li.style.height)+"?random");
//判断哪个ul的高度最矮用到的临时变量
var ulHeigh = uls[0];
//遍历ul
for (var j = 0; j < uls.length; j++) {
//来判断哪个ul的高度最矮
if(ulHeigh.offsetHeight>uls[j].offsetHeight){
//谁最矮ulHeight就等于谁;
ulHeigh = uls[j];
}
}
//然后把li放到最矮的ul中
ulHeigh.appendChild(li);
}
}
}
//创建图片函数(里面有两个形参分辨是,要添加的位置,和要添加的图片地址毕竟不一样的图看着好看);
function creataImg(li,src){
//创建一个图片
var img = document.createElement("img");
//给图片添加一个加载时的临时图片
img.src = "http://www.easyicon.net/api/resizeApi.php?id=1189601&size=48";
//添加载图片添加动画-----------------(小圆圈转)
img.style.animationName = "mmmm";
img.style.animationDuration = "5s";
img.style.animationIterationCount = "infinite";
//添加载图片添加动画-----------------
//把图片放进要添加的li中
li.appendChild(img);
//在创建一个用来加载图片的变量
var imgNode = new Image();
//监听图片是否加载完成
imgNode.onload = function(){
//加载完成后把动画清除掉
img.style.animationName = "";
//加载完后把上边的临时图片更换;
img.src = this.src;
}
//添加准备加载的图片
imgNode.src = src;
}
//创建一个随机函数(为了上边的图片高度不同);
function randomFn(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
</script>
</head>
<body>
<div id="thead">
<h1>带有预加载的瀑布流</h1>
</div>
<div id="fbody">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
