html部分（图片都是本地，自己需要改动图片）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/one.css"/>
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<!--瀑布流的特点是等宽不等高-->
<!--怎么滑都没有尽头-->
<div id="main">
<div class="box">
<div class="pic">
<img src="img/003.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/005.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/006.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/007.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/009.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/010.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/011.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/012.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/013.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/014.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/016.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/018.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/019.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/020.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/021.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/022.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/023.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/024.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/025.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/index.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/index001.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/u=1265768299,3970469844&fm=21&gp=0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/022.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/023.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/024.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/009.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/010.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/011.jpg"/>
</div>
</div>
</div>
</body>
</html>
css部分
*{
margin: 0;
padding: 0;
}
#main{
position: relative;
}
.box{
padding: 15px 0 0 15px;
float: left;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 300px;
height: auto;
}
js部分
window.onload = function() {
waterfall('main', 'box');
var dataInt={"data":[{"src":'003.jpg'},
{"src":'022.jpg'}
,{"src":'025.jpg'},
{"src":'006.jpg'},
{"src":'007.jpg'},
{"src":'019.jpg'},
{"src":'020.jpg'},
{"src":'010.jpg'}]}
window.onscroll=function(){
if (checkScrollSlide) {
var oParent=document.getElementById("main");
//将数据块渲染到当页面的尾部
for (var i=0;i<dataInt.data.length;i++) {
var oBox=document.createElement('div');
oBox.className='box';
oParent.appendChild(oBox);
var oPic=document.createElement('div');
oPic.className='pic';
oBox.appendChild(oPic);
var oImg=document.createElement('img');
oImg.src="img/"+dataInt.data[i].src;
oPic.appendChild(oImg);
}
waterfall('main', 'box');
}
}
}
function waterfall(parent, box) {
//将main下的所有的class为box的元素取出来
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent, box);
// console.log(oBoxs.length);
//计算整个页面显示的列数（页面宽/box的宽）
var oBoxw = oBoxs[0].offsetWidth; //获得每一列的宽度
// console.log(oBoxw);
//获取页面的宽度除以每一列的宽度
var cols = Math.floor(document.documentElement.clientWidth / oBoxw);
//console.log(cols);
//设置main的宽
oParent.style.cssText = 'width:' + oBoxw * cols + 'px;margin:0 auto';
//声明一个数组，存放每一列的高度
var hArr = [];
//遍历所有的oBoxs
for(var i = 0; i < oBoxs.length; i++) {
if(i < cols) {
hArr.push(oBoxs[i].offsetHeight);
} else {
//求第一列box的最小的高
//借助apply方法改变函数中this的指向，就是可以对数组取最小值
var minH = Math.min.apply(null, hArr);
var index=getMinhIndex(hArr,minH);//索引数组中高最小的那个
oBoxs[i].style.position='absolute';
oBoxs[i].style.top=minH+'px';
//oBoxs[i].style.left=oBoxw*index+'px';
oBoxs[i].style.left=oBoxs[index].offsetLeft+'px';
hArr[index]+=oBoxs[i].offsetHeight;
}
}
console.log(hArr);
}
//根据class获取元素
function getByClass(parent, clsName) {
var boxArr = new Array(); //用来存储获取到的所有的class为box的元素
oElements = parent.getElementsByTagName('*'); //获得main下面的所有的元素,形成一个数组
//遍历数组oElements
for(var i = 0; i < oElements.length; i++) {
if(oElements[i].className == clsName) {
boxArr.push(oElements[i]);
}
}
return boxArr;
}
//getMinhIndex(hArr,minH);
//找到数组中最小数值的arr[i]
function getMinhIndex(arr,val){
for(var i in arr){
if (arr[i]==val) {//数组hArr[i]中的minH是最小值，此时的i就是我们想要的
return i;
}
}
}
//检测是否具备了滚动条加载数据块的条件
function checkScrollSlide(){
var oParent=document.getElementById('main');
var oBoxs=getByClass(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;
// console.log(scrollTop);
var height=document.body.clientHeight||document.documentElement.clientHeight;
// console.log(height);
return (lastBoxH<scrollTop+height)?true:false;
}
