JS 瀑布流效果
准备工作: 选择20张图片保存在images文件夹;
1.html部分:
<!DOCTYPE html>
<html>
<head>
<title>瀑布流</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script type="text/javascript" src = "./js/index.js"></script>
</head>
<body>
<div id = "main">
<div class="box">
<div class = "pic">
<img src="./images/0.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/1.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/2.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/3.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/4.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/5.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/6.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/7.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/8.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/9.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/10.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/11.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/12.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/13.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/14.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/15.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/16.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/17.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/18.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/19.jpg">
</div>
</div>
<div class="box">
<div class = "pic">
<img src="./images/20.jpg">
</div>
</div>
</div>
</body>
</html>2.css部分:
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
/*div 边宽的圆角模式*/
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
img{
width: 200px;
}3.js 部分:
window.onload=function(){
waterfall('main','box');
//假设加载数据的条件
var dataInt={"data":[{"src":'0.jpg'},{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'},{"src":'5.jpg'},{"src":'6.jpg'},{"src":'7.jpg'},{"src":'8.jpg'},{"src":'9.jpg'},{"src":'10.jpg'},{"src":'11.jpg'},{"src":'12.jpg'},{"src":'13.jpg'},{"src":'14.jpg'},{"src":'15.jpg'},{"src":'16.jpg'},{"src":'17.jpg'},{"src":'18.jpg'},{"src":'19.jpg'},{"src":'20.jpg'}]};
// ********判断是否具备加载条件*********
window.onscroll = function(){
if(checkScrollSlide()){
var oParent=document.getElementById('main');
//将数据块渲染到当前页面的尾部
for(var i=0;i<dataInt.data.length;i++){
var oBox=document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var oPic=document.createElement('div');
oPic.className='pic';
oBox.appendChild(oPic);
var oImg=document.createElement('img');
oImg.src='./images/'+dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall('main','box');
}
}
}
function waterfall(parent,box){
var oParent=document.getElementById(parent);
//1.获取所有的class=box的div
var oBoxs=getByClass(oParent,box);
//2.获取盒子的宽度
var oBoxW=oBoxs[0].offsetWidth;
//3.获取一排盒子的个数
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
//4.设置main的宽度,做到页面居中效果
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
// *******找到最矮图片*******
// 1.存储第一排的高度
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
//2.添加数组元素
hArr.push(oBoxs[i].offsetHeight);
}else{
//3.找出数组中最小的(数组使用apply)
var minH=Math.min.apply(null,hArr);
//4.制作找出最小值索引的函数
var index=getMinhIndex(hArr,minH);
//5.添加第二列的图片位置
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
// 索引*一个盒子的宽度
// oBoxs[i].style.left=oBoxW*index+'px';
// 方法二:
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
//找到最小图片的索引值
function getMinhIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
//获取所有的box
function getByClass(parent,clsName){
var boxArr=new Array();
var oElemnets=parent.getElementsByTagName('*');
for(var i=0;i<oElemnets.length;i++){
if(oElemnets[i].className==clsName){
boxArr.push(oElemnets[i]);//数组值的添加
}
}
return boxArr;
}
//检测是否符合加载数据块的条件
function checkScrollSlide(){
var oParent=document.getElementById('main');
var oBoxs=getByClass(oParent,'box');
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
var height=document.body.clientHeight || document.documentElement.clientHeight;
return (lastBoxH < scrollTop+height)?true:false;
}
