利用js写的一个瀑布流
利用js写的一个瀑布流
并且实现滚动条的实时刷新
css文件源码：
*{
margin: 0px;
padding: 0px;
}
#container{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.box_img{
padding: 5px;
border: 1px solid #cccccc;
box-shadow: 0px 0px 5px #ccc;
border-radius: 5px;
}
.box_img img{
width: 150px;
height: auto;
}
js文件源码
window.onload=function(){
imgLocation("container","box");
var jsonimg={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};
window.onscroll=function(){
if(checkescroll()){
var parent=document.getElementById("container");
for(var i=0;i<jsonimg.data.length;i++){
var box=document.createElement("div");
box.className="box";
parent.appendChild(box);
var box_img=document.createElement("div");
box_img.className="box_img";
box.appendChild(box_img);
var img=document.createElement("img");
img.src="images/"+jsonimg.data[i].src;
box_img.appendChild(img);
}
imgLocation("container","box");
}
}
}
function checkescroll(){
var cparent=document.getElementById("container");
var cchild=getChildElement(cparent,"box");
var endchildtotop=cchild[cchild.length-1].offsetTop;
var pageheight=document.documentElement.clientHeight||document.body.clientHeight;
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
if(endchildtotop<(pageheight+scrolltop)){
return true;
}
}
function imgLocation(parent,content){
var iparent=document.getElementById(parent);
var ichild=getChildElement(iparent,content);
var imgwidth=ichild[0].offsetWidth;
var cols=parseInt(document.documentElement.clientWidth/imgwidth);
iparent.style.cssText="width:"+cols*imgwidth+"px;margin:0 auto";
var boxarr=[];
for(var i=0;i<ichild.length;i++){
if(i<cols){
var height=ichild[i].offsetHeight;
boxarr.push(height);
}
else{
var minheight=Math.min.apply(null,boxarr);
var indexminheight=getMinHeightindex(boxarr,minheight);
ichild[i].style.position="absolute";
ichild[i].style.top=minheight+"px";
ichild[i].style.left=ichild[indexminheight].offsetLeft+"px";
boxarr[indexminheight]=minheight+ichild[i].offsetHeight;
}
}
}
function getMinHeightindex(boxarr,minheight){
for(var i in boxarr){
if(boxarr[i]==minheight){
return i;
}
}
}
function getChildElement(parent,content){
var elementArray=[];
var allchild=parent.getElementsByTagName("*");
for(var i=0;i<allchild.length;i++){
if(allchild[i].className==content){
elementArray.push(allchild[i]);
}
}
return elementArray;
}
HTML源码：
<head> <meta charset="UTF-8">
<title>JS实现的瀑布流</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/waterfall.js">
</script>
</head>
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="images/0.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/2.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/4.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/6.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/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/10.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="images/11.jpg">
</div>
</div>
<div class="box"> <div class="box_img"> <img src="images/12.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/13.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/14.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/15.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/16.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/17.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/18.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/19.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/20.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/21.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/22.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/23.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/24.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/25.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/26.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/27.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/28.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/29.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/30.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/31.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/32.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/33.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/34.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/35.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/36.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/37.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/38.jpg"> </div> </div> <div class="box"> <div class="box_img"> <img src="images/39.jpg"> </div> </div></div></body>
