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();
}
})
})
//瀑布流實(shí)現(xiàn)方法，從第二行開始總是把圖片放在高度最短的圖片后邊
var ImgArr;
function waterFull(){
for(var i = 0; i < ImgArr.length; i++){
//創(chuàng)建大盒子
var newBox = document.createElement('div');
newBox.className = 'box';
$("#main")[0].appendChild(newBox);
//創(chuàng)建裝圖片的小盒子
var newPic = document.createElement('div');
newPic.className = 'picBox';
newBox.appendChild(newPic);
//創(chuàng)建圖片
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'});
//子盒子定位
//創(chuàng)建一個(gè)數(shù)組，用來存放所有的高度
var heightArr = [];
for(var i = 0; i< allBox.length; i++){
//求出每個(gè)盒子的高度
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'
});
//更新數(shù)組最矮高度，使下一圖片總是在高度數(shù)組中找到最矮高度的圖片下面進(jìn)行拼接
heightArr[minBoxIndex] += boxHeight;
}
}
}
//自己可以加上下拉刷新方法
function isLoad(){
//拿到最后一個(gè)盒子
var lastBox = $('#main > div').last();
//當(dāng)滑動(dòng)到最后一張圖片的中間位置時(shí)開始加載下一頁
var lastCurrentHeight = $(lastBox).outerHeight() + $(lastBox).offset().top;
//瀏覽器的高度
var screenHeight = $(window).height();
//頁面滾動(dòng)的高度
var screenTopHeight = $(window).scrollTop();
//何時(shí)加載頁面
return lastCurrentHeight <= screenHeight + screenTopHeight
}
</script>
</html>
