瀑布流就是图片的一种呈现方式，适合条件
1、图片较多
2、网页较长
3、网页中的图片宽度一定 ，但是长度不一定
下面介绍一下的实现过程，
1、确定布局。即四列的弹性布局 当然 这个可以改
2、加载图片
3、计算最小列
4、在最小列的后面插入图片
5、实现滚动加载；利用最后的滚动监听事件
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background:#dedede;
margin:0;
padding: 0;
}
.pubu-container{
width:70%;
margin:0 auto;
/*弹性布局*/
display: flex;
/*方向*/
flex-direction: row;/* 可以理解成float:left. */
}
.pubu-container > .item{
flex:1 /*弹性项的占比，就是这四列都站一份 就是四分之一*/;
margin: 17px; /*设置间距*/
}
.pubu-container > .item > img{
width:100%; /*将每一张照片宽度都设置为占盒子的100%*/
border: 10px solid white;
margin-top: 8px;
transition:all 0.3s ease-in-out; /*设置动画过渡的效果，ease-in-out的意思是规定好慢速开始慢速结束过度效果*/
}
.pubu-container > .item > img:hover{
cursor: pointer; /*将鼠标放在图片上面 就会显示出小手 的样子*/
transform: scale(1.05);/*变大1.1倍*/
box-shadow: 0px 3px 2px 1px #999;
}
</style>
<script>
//屏幕默认大小,初始化图片的占用位置
var windowHeight = window.screen.height+500;
var imgId = 0; /*设置图片循环*/
// 加载完毕就会执行onload
window.onload = function(){
insertImg();
//监听滚动事件
window.document.addEventListener("scroll", function(){
//document.documentElement.scrollTop:已经滚动的内容高度
//window.screen.height: 窗口高度
//document.documentElement.scrollHeight:能滚动的最大高度，是和屏幕的默认高度有关的
if(document.documentElement.scrollTop+ window.screen.height > document.documentElement.scrollHeight){
//再此插入图片
windowHeight+=10;
//将控制的高度再增加500，以便达到循环的要求
insertImg();
}
});
}
//插入图片的算法
var insertImg = function(){
var inter = setInterval(function(){
//setInterval（function(), 100）,留一百毫秒给浏览器进行渲染
if(document.documentElement.scrollHeight > windowHeight){ //达到预期的高度. 停止
clearInterval(inter);//停止定时器
}
var mDiv = minDiv();
//插入图片
imgId++;
if(imgId > 10){
imgId = 1;
}/*利用if语句进行循环*/
// 创造一个img的结点
var img = document.createElement("img");
img.setAttribute("src","img/"+imgId+".jpg");
mDiv.appendChild(img);//放图, 给浏览器一个指令. 插图. 但是浏览器的渲染还没有完成.
}, 100);//定时器, 每隔100毫秒. 运行一次function
}
/**
* 当前哪一列是高度最小的
*/
var minDiv = function(){
var pb1 = document.getElementById("pubu-01");
var pb2 = document.getElementById("pubu-02");
var pb3 = document.getElementById("pubu-03");
var pb4 = document.getElementById("pubu-04");
// 提取出div中的照片 返回元素的结点
var pbImgs_1 = pb1.children;
var pbImgs_2 = pb2.children;
var pbImgs_3 = pb3.children;
var pbImgs_4 = pb4.children;
var pb1Height = jisuan(pbImgs_1);
var pb2Height = jisuan(pbImgs_2);
var pb3Height = jisuan(pbImgs_3);
var pb4Height = jisuan(pbImgs_4);
var minHeight = Math.min(pb1Height, pb2Height, pb3Height, pb4Height);
if(minHeight == pb1Height){
return pb1;
}
if(minHeight == pb2Height){
return pb2;
}
if(minHeight == pb3Height){
return pb3;
}
if(minHeight == pb4Height){
return pb4;
}
}
var jisuan = function(pbImgs){
if(pbImgs == null || pbImgs.length == 0){//这一列还没有图片
return 0;
} else {
var height = 0;
//获取到当前列每一个图片
for(var i = 0 ; i < pbImgs.length;i++){
var img = pbImgs[i];
var h = img.height;
height += h;//累加
}
return height;
}
}
</script>
</head>
<body>
<!-- 创建四个盒子 在这四个盒子里面添加照片 -->
<div class="pubu-container">
<div class="item" id="pubu-01">
</div>
<div class="item" id="pubu-02">
</div>
<div class="item" id="pubu-03">
</div>
<div class="item" id="pubu-04">
</div>
</div>
</body>
</html>
