js滝の流れ、画像の適応表示を実現
8880 ワード
waterfall.html
/*
*author:renault
*mail:[email protected]
*/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
</title>
<script src=js/waterfall.js></script>
<link rel="stylesheet" type="text/css" href="css/waterfall1.css">
</head>
<body>
<div id="waterfall">
<div class="box">
<div class="box_img">
<img src="images/1.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/6.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/2.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/7.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/3.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/8.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/9.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/4.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/0.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/5.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/10.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/1.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/6.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/2.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/7.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/3.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/8.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/9.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/4.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/0.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/5.jpg"/>
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/10.jpg"/>
</div>
</div>
</div>
</body>
</html>*{
margin:0px;
padding:0px;
}
#waterfall{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float:left;
}
.box_img{
padding: 5px;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
border: 1px solid #ccc;
}
.box_img img{
width:162px;
height:auto;
}window.onload = function(){
autoPicture('waterfall','box');
var imgData = {'data':[{'src':'images/4.jpg'},{'src':'images/3.jpg'},{'src':'images/2.jpg'},{'src':'images/1.jpg'},{'src':'images/5.jpg'},{'src':'images/46.jpg'},{'src':'images/7.jpg'},{'src':'images/8.jpg'},{'src':'images/10.jpg'},{'src':'images/9.jpg'},{'src':'images/13.jpg'},{'src':'images/12.jpg'},{'src':'images/11.jpg'}]};
window.onscroll = function(){
if(checkScrollSide()){
var parentNode=document.getElementById('waterfall');
for(var i=0;i<imgData.data.length;i++){
/*var newImg = document.createElement('img');// IMG
newImg.src=imgData.data[i].src; //img SRC imgData
var newDiv_biximg =document.createElement('div');// div class="box-img"
newDiv_biximg.className ='box-img';
newDiv_biximg.appendChild(newImg); // img box-img
var newDiv_box = document.createElement('div');
newDiv_box.className = 'box';
newDiv_box.appendChild(newDiv_biximg);
parentNode.appendChild(newDiv_box);*/
var newDiv_box = document.createElement('div');
newDiv_box.className='box';
parentNode.appendChild(newDiv_box);
var newDiv_boximg =document.createElement('div');// div class="box-img"
newDiv_boximg.className='box_img';
newDiv_box.appendChild(newDiv_boximg);
var newImg = document.createElement('img');// IMG
newImg.src=imgData.data[i].src;
newDiv_boximg.appendChild(newImg);
}
autoPicture('waterfall','box');
};
}
}
/* ，
*param1:
*param2:
*/
function autoPicture(parent,box){
var parentNode = document.getElementById(parent);//
var boxNode = getClassObj(parentNode,box);// box
var boxWidth=boxNode[0].offsetWidth;// ， BOX
var winWidth=0;
//
if (window.innerWidth){
winWidth = window.innerWidth;
}else if ((document.body) && (document.body.clientWidth)){
winWidth = document.body.clientWidth;
}
//document.documentElement.clientWidth
var num=Math.floor(winWidth/boxWidth);//
parentNode.style.cssText='width:'+boxWidth*num+'px;margin: 0 auto;';//
var boxHeight=[];
for(var i=0;i<boxNode.length;i++){
var boxH=boxNode[i].offsetHeight;
if(i<num){
boxHeight.push(boxH);
}else{
var minH=Math.min.apply(null,boxHeight);
var minHIndex=getMinHeigthIndex(boxHeight,minH);
boxNode[i].style.position='absolute';
boxNode[i].style.top=minH+'px';//offsetTop HTML ，style.top
//offsetTop ， style.top /offsetTop ， style.top ， ：px。
boxNode[i].style.left=boxNode[minHIndex].offsetLeft+'px';//offsetLeft left
// ， X、Y x
boxHeight[minHIndex]+=boxNode[i].offsetHeight;
}
}
}
/*
*param1:
*param2:
*/
function getClassObj(parents,className){
var objParent = parents.getElementsByTagName('*');//
var boxClass=[];// ， className
for(var i=0;i<objParent.length;i++){
//console.log(objParent[i]);
/* <div class="box"><div class="box_img"><img src="images/1.jpg">
<div class="box"><div class="box_img"> <img src="images/6.jpg">
........
<div class="box"> <div class="box_img"><img src="images/10.jpg">*/
if(objParent[i].className == className){
boxClass.push(objParent[i]);
}
}
return boxClass;
}
function getMinHeigthIndex(boxHeight,minH){
for(var i in boxHeight){
if(boxHeight[i]==minH){
return i;
}
}
}
function checkScrollSide(){
var parentNode = document.getElementById('waterfall');
var boxNode = getClassObj(parentNode,'box');
var lastPicture = boxNode[boxNode.length-1].offsetTop+Math.floor(boxNode[boxNode.length-1].offsetHeight);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var pageHeight = document.documentElement.clientHeight;
return (lastPicture>pageHeight)?true:false;
}