瀑布流所依赖的函数 可以新建一个loading.js封装起来以便以后使用
//第一个参数是所有图片的路径,第二是回调函数,用来告诉调用着图片已全部加载并返回所有图片元素
function loading(arr,callBack){
//把所有创建的图片对象存起来
var arrAllImg = [];
//用来计数,检测所有的图片元素都加载完成
var count = 0;
//判断使用者传进来的第一个参数是否是数组
if(!(arr instanceof Array)){
return;
}
//根据传进来的图片路径的个数创建相应个数的图片对象
for(var i = 0;i<arr.length;i++){
//下面两句话一个意思
//js内置对象
// var img = new Image();
//DOM操作
var img = document.createElement('img');
img.src = arr[i];
//把创建好的图片对象放到数组中
arrAllImg.push(img);
}
//给所有的图片对象添加onload
for (var i = 0; i < arrAllImg.length; i++) {
arrAllImg[i].onload = function(){
//只有有一个图片对象的onload执行了,就证明它的图片加载完成,就让count加一
count++;
//如果count等于了图片元素的个数,就证明所有的图片都加载完了
if (count == arrAllImg.length) {
//这个时候就可以回调了,告诉使用者图片全部加载完成,你可以用了
if(callBack instanceof Function){
callBack(arrAllImg);
}
}
}
}
}
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#waterFall{box-shadow: 0 5px 5px #999;width: 880px;list-style: none;margin: auto;}
#waterFall li{width: 200px;margin: 10px;float: left;}
li img{width: 200px;margin: 10px 0 10px 0;float: left;}
</style>
</head>
<script src="js/jquery-1.12.1.js" type="text/javascript" charset="utf-8"></script>
<body>
<ul id="waterFall">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg'];
loading(arr,function(arrImgs){
var lisHeight = [0,0,0,0];
for (var i = 0; i < arrImgs.length; i++) {
var tempHeight = lisHeight[0];
var pos = 0;
for (var j = 0; j < lisHeight.length; j++) {
if (lisHeight[j]<tempHeight) {
tempHeight = lisHeight[j];
pos = j;
}
}
$('li').eq(pos).append(arrImgs[i]);
lisHeight[pos] += arrImgs[i].offsetHeight + 20;
}
var maxH = 0;
for (var i = 0; i < lisHeight.length; i++) {
if (lisHeight[i] > maxH) {
maxH = lisHeight[i];
}
}
$('#waterFall').css('height',maxH + 20);
});
</script>
</html>
以上就是轮播图代码；
