HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流测试2</title>
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
</head>
<body>
<div id="neirong">
<div class="box">
<div class="img_box">
<img src="image/a.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/b.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/c.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/d.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/e.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/f.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/a.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/b.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/c.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/d.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/e.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/f.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/a.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/b.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/c.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/d.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/e.jpg">
</div>
</div>
<div class="box">
<div class="img_box">
<img src="image/f.jpg">
</div>
</div>
</div>
</body>
</html>
JS部分
window.onload=function () {
tp_paixu("neirong","box");
var data=[{"src":"image/a.jpg"},{"src":"image/b.jpg"},{"src":"image/c.jpg"},{"src":"image/d.jpg"},{"src":"image/e.jpg"},{"src":"image/f.jpg"}];
window.onscroll=function () {
if(getOnscroll()){
var zhukuangjia=document.getElementById("neirong");
for (var i=0;i<data.length;i++){
var div1=document.createElement("div");
div1.className="box";
zhukuangjia.appendChild(div1);
var div2=document.createElement("div");
div2.className="img_box";
div1.appendChild(div2);
var img1=document.createElement("img");
img1.src= data[i].src;
div2.appendChild(img1);
}
}
tp_paixu("neirong","box");
}
}
function getOnscroll() {
var ZiBoxAll=document.getElementsByClassName("box");
var lastTop=ZiBoxAll[ZiBoxAll.length-1].offsetTop;
var OnscrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var screenHeight=document.documentElement.clientHeight||document.body.clientHeight;
if(lastTop<OnscrollTop+screenHeight){
return true;
}
}
function tp_paixu(fu,zi) {
var fu1 = document.getElementById(fu);
var ZiBoxAll = document.getElementsByClassName(zi);
var img_width=ZiBoxAll[0].offsetWidth;
var cols=Math.floor(1200/img_width);
var needWidth=cols*img_width;
fu1.style.cssText="width:"+needWidth+"px;margin:auto;";
var BoxHeightAll=new Array();
for(var i=0;i<ZiBoxAll.length;i++){
if(i<cols){
BoxHeightAll[i]=ZiBoxAll[i].offsetHeight;
}
else {
var minHeight=Math.min.apply(null,BoxHeightAll);
var minHeightPos=getMinHeightPos(BoxHeightAll,minHeight);
ZiBoxAll[i].style.position="absolute";
ZiBoxAll[i].style.top=minHeight+"px";
ZiBoxAll[i].style.left=ZiBoxAll[minHeightPos].offsetLeft+"px";
BoxHeightAll[minHeightPos]+=ZiBoxAll[i].offsetHeight;
}
}
}
function getMinHeightPos(array,minHeight) {
for (var i in array){
if(array[i]==minHeight){
return i;
}
}
}
CSS部分
*{
padding: 0px;
margin: 0px;
}
#neirong{
position: relative;
}
.box{
padding: 5px;
float: left;
}
.img_box{
padding: 5px;
border: darkgray 1px solid;
border-radius: 5px;
}
.img_box img{
width: 350px;
height: auto;
}
