<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> -->
<!-- <script type="text/javascript" src="./jquery.js"></script> -->
<script type="text/javascript" src="./index.js"></script>
<title></title>
<style type="text/css">
*{padding: 0;margin:0;}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float:left;
}
.pic{
padding: 10px;
boxrder:1px solid #ccc;
pic-shadow: 0 0 6px #ccc;
boxrder-radius: 5px;
}
.pic img{
width:162px;
height:auto;
}
</style>
<!-- <link rel="stylesheet" type="text/css" href="./css3.css"> -->
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="./javascript/images/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/9.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="./javascript/images/21.jpg"/>
</div>
</div>
</div>
</boxdy>
</html>
//
window.onload=function(){
waterfall('main','box');
// var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
// window.onscroll=function(){
// if(checkScrollSlide){
// //加载后台数据
// var oParent = document.getElementById('main');// 父级对象
// for(var i=0;i<dataInt.data.length;i++){
// var oPin=document.createElement('div'); //添加 元素节点
// oPin.className='box'; //添加 类名 name属性
// oParent.appendChild(oPin); //添加 子节点
// var oBox=document.createElement('div');
// oBox.className='pic';
// oPin.appendChild(oBox);
// var oImg=document.createElement('img');
// oImg.src='./images/'+dataInt.data[i].src;
// oBox.appendChild(oImg);
// }
// waterfall('main','pin');
// }
// }
}
function waterfall(parent,box){
//取到所有box
var oParent=document.getElementById(parent);
var oBoxs=getClass(oParent,box);
//计算列数
var oBoxW=oBoxs[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main宽
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
var hArr=[];
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr);
var index=getminIndex(hArr,minH);
oBoxs[i].style.postion='absolute';
oBoxs[i].style.top=minH+'px';
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
}
function getClass(parent,className){
var boxArr=[];//存储所有box
oElements=parent.getElementsByTagName('*');
for(var i=0;i<oElements.length;i++){
if (oElements[i].className==className) {
boxArr.push(oElements[i]);
}
}
return boxArr;
}
function getminIndex(arr,val){
for(var i in arr){
if(arr[i]==val){
return i;
}
}
}
//检测是否具备滚动加载数据块条件
// function checkScrollSlide(){
// var oParent=document.getElementById('main');
// var oBoxs=getClass(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;
// }
分享
