简单实现瀑布流效果
PUBUmodel.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/pubu.css">
<script src="JS/PU.js" type="text/javascript" charset="utf-8" defer></script>
</head>
<body>
<div id="container">
<div class="box"><div class="img_box"><img src="images/imagess/ima1.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima2.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima3.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima4.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima5.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima6.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima7.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima8.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima9.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima10.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima1.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima2.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima3.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima4.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima5.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima6.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima7.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima8.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima9.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima10.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima2.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima3.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima4.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima5.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima6.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima7.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima8.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima9.jpg" alt=" "></div></div>
<div class="box"><div class="img_box"><img src="images/imagess/ima10.jpg" alt=" "></div></div>
</div>
</body>
</html>
---------------------------------------------分割线看什么看-------------------------------------------------------------
PU.js
window.onload=function () {
imgLocation("container", "box");
var imgdata={"data":[{"src":"ima1.jpg"},{"src":"ima2.jpg"},{"src":"ima3.jpg"},{"src":"ima4.jpg"},{"src":"ima5.jpg"},{"src":"ima6.jpg"},{"src":"ima7.jpg"},{"src":"ima8.jpg"}]};
window.onscroll=function(){
if(check()){
var len=imgdata.data.length
for(var i=0;i<len;i++){
var div=document.createElement("div");
div.className="box";
var imgdiv=document.createElement("div");
imgdiv.className="img_box";
div.appendChild(imgdiv);
var img=document.createElement("img");
img.src="images/imagess/"+imgdata.data[i].src;
imgdiv.appendChild(img);
var parent=getParent("container");
parent.appendChild(div);
imgLocation("container", "box");
}
}
}
}
function check(){
var cparent=getParent("container");
var content=getAllcontent(cparent,"box");
var scrollTop=document.documentElement.scrollTop;
var clientHeight=document.documentElement.clientHeight;
var lastImgTop=content[content.length-1].offsetTop;
if(scrollTop+clientHeight>=lastImgTop){
return true;
}
}
function getParent(parent){
return document.getElementById(parent);
}
function imgLocation(parent,content) {
var cparent=getParent(parent);
var ccontent=getAllcontent(cparent, "box");
var imgWidth=ccontent[0].offsetWidth; //clientWidth 是对象可见的宽度，不包滚动条等边线,会随窗口的显示大小改变,border+padding+width
var cWidth=document.documentElement.clientWidth||document.body.clientWidth; //对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变
var num=Math.floor(cWidth/imgWidth);
cparent.style.cssText="width:"+num*imgWidth+"px;margin:0px auto;";
var len=ccontent.length;
var ArrHeight=[];
for(var i=0;i<len;i++){
if(i<num){
ArrHeight[i]=ccontent[i].offsetHeight;
}
else{
var minHeight=Math.min.apply(null,ArrHeight);
var minloca=getMinHeightLocation(ArrHeight,minHeight);
var offleft=ccontent[minloca].offsetLeft;
ccontent[i].style.position="absolute";
ccontent[i].style.left=offleft+"px";
ccontent[i].style.top=minHeight+"px";
ArrHeight[minloca]+=ccontent[i].offsetHeight;
}
}
}
function getMinHeightLocation(content,minHeight){
var num=content.length;
for(var i=0;i<num;i++){
if(content[i]==minHeight){
return i;
}
}
}
function getAllcontent(cparent,box){
var Allcontent=[];
var All=cparent.getElementsByTagName('*');
var len=All.length;
for(var i=0;i<len;i++){
if(All[i].className==box){
Allcontent.push(All[i]);
}
}
return Allcontent;
}
---------------------------------------------分割线看什么看-------------------------------------------------------------
pubu.css
*{
margin: 0;
padding: 0;
}
#container{
position: relative;
}
.box{
float: left;
padding: 5px;
}
.img_box{
padding: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.img_box img{
width: 150px;
height: auto;
}
效果如图：
