image.png
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img {
display: block;
}
#main {
position: relative;
}
.box {
padding: 15px 0 0 15px;
float: left;
}
.picBox {
width: 200px;
/*margin-bottom: 10px;*/
}
.picBox img {
width: 200px;
}
</style>
</head>
<body>
<div id="main">
</div>
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(window).on('load',function(){
ImgArr = [
{url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
{url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
{url:'https://pic3.40017.cn/zzy/rimage/2015/05/06/17/CIC3dX_90x90_00.jpg'},
{url:'https://pic3.40017.cn/line/admin/2014/10/22/15/VXf1RC_464x251_00.jpg'},
{url:'https://pic4.40017.cn/zzy/rimage/2016/10/11/22/OiwXbD_242x150_00.jpg'},
{url:'https://pic5.40017.cn/01/000/e4/7b/rBANC1lcWqGARH-WAADACF2zBS0862.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
{url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
{url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'},
{url:'https://pic4.40017.cn/zzy/rimage/2016/10/11/22/OiwXbD_242x150_00.jpg'},
{url:'https://pic5.40017.cn/01/000/e4/7b/rBANC1lcWqGARH-WAADACF2zBS0862.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
{url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
{url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'},
{url:'https://pic4.40017.cn/zzy/rimage/2016/10/11/22/OiwXbD_242x150_00.jpg'},
{url:'https://pic5.40017.cn/01/000/e4/7b/rBANC1lcWqGARH-WAADACF2zBS0862.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/07/12/RsWjpx_300x300_00.jpg'},
{url:'https://pic5.40017.cn/02/001/e4/dc/rBLkCFlcXQqAe1nJAADHdsrPMPs903.jpg'},
{url:'https://pic3.40017.cn/poi/2016/03/02/18/k9EyuA_222x436_00.jpg'},
{url:'https://pic4.40017.cn/poi/2016/07/08/14/D4zlPD_222x208_00.jpg'}
];
waterFull();
$(window).on('scroll',function(){
if(isLoad()){
ImgArr = ImgArr.concat(ImgArr);
waterFull();
}
})
})
//瀑布流实现方法，从第二行开始总是把图片放在高度最短的图片后边
var ImgArr;
function waterFull(){
for(var i = 0; i < ImgArr.length; i++){
//创建大盒子
var newBox = document.createElement('div');
newBox.className = 'box';
$("#main")[0].appendChild(newBox);
//创建装图片的小盒子
var newPic = document.createElement('div');
newPic.className = 'picBox';
newBox.appendChild(newPic);
//创建图片
var newImg = document.createElement('img');
newImg.src = ImgArr[i].url;
newPic.appendChild(newImg);
}
//拿到所有的大盒子
var allBox = $('#main > .box');
//求出盒子的宽度
var boxWidth = $(allBox).eq(0).outerWidth();
//求出浏览器的宽度
var screenWidth = $(window).width();
//算出图片一共有几列,向下取整
var ImgCols = Math.floor(screenWidth/boxWidth);
//求出父元素的宽度，让父元素居中显示
$('#main').css({'width': boxWidth*ImgCols + 'px'});
$("#main").css({'margin': '0 auto'});
//子盒子定位
//创建一个数组，用来存放所有的高度
var heightArr = [];
for(var i = 0; i< allBox.length; i++){
//求出每个盒子的高度
var boxHeight = $("#main").find(".box").eq(i).outerHeight();
//第一行以上的盒子需要定位
if(i < ImgCols){
//添加第一行所有盒子的高度
heightArr.push(boxHeight);
} else {
//求出最矮的盒子高度
var minBoxHeight = Math.min.apply(null,heightArr);
var minBoxIndex = $.inArray(minBoxHeight,heightArr);
//盒子瀑布流定位，顶部间距就是最矮盒子的高度
allBox.eq(i).css({
'position':'absolute',
'top':minBoxHeight + 'px',
'left':minBoxIndex * boxWidth + 'px'
});
//更新数组最矮高度，使下一图片总是在高度数组中找到最矮高度的图片下面进行拼接
heightArr[minBoxIndex] += boxHeight;
}
}
}
//自己可以加上下拉刷新方法
function isLoad(){
//拿到最后一个盒子
var lastBox = $('#main > div').last();
//当滑动到最后一张图片的中间位置时开始加载下一页
var lastCurrentHeight = $(lastBox).outerHeight() + $(lastBox).offset().top;
//浏览器的高度
var screenHeight = $(window).height();
//页面滚动的高度
var screenTopHeight = $(window).scrollTop();
//何时加载页面
return lastCurrentHeight <= screenHeight + screenTopHeight
}
</script>
</html>
