HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流JQ</title>
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div id="main">
</div>
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</body>
</html>
CSS
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
margin: 0;
padding: 0;
}
#main{
position: relative;
}
.box{
padding:15px 0 0 15px;
float: left;
}
.pic{
border:1px solid #dddddd;
padding: 10px;
background-color: white;
}
.pic img{
width: 165px;
}
JQuery
var imgArr = [];
$(document).on('ready',function () {
for(var i=0; i<=40; i++){
addBox('images/' + i +'.jpg');
imgArr[i]={'img': i+'.jpg'};
}
});
$(window).on('load', function () {
waterFall();
$(window).on('scroll', function () {
if(cheackWillLoad()){
var data = {'dataImg': imgArr};
$.each(data.dataImg, function (index, value) {
addBox('images/'+ $(value).attr('img'))
});
waterFall();
}
})
});
function addBox(img) {
var newBox = $('<div>').addClass('box').appendTo($('#main'));
var newPic = $('<div>').addClass('pic').appendTo($(newBox));
$('<img>').attr('src', img).appendTo($(newPic));
}
function waterFall(){
var allBox = $('#main>.box');
var boxW = $(allBox).eq(0).outerWidth();
var screenW = $(window).width();
var cols = Math.floor(screenW / boxW);
$('#main').css({
'width': cols * boxW + 'px',
'margin': '0 auto'
});
var heightArr = [];
$.each(allBox, function (index, value) {
var boxH = $(value).outerHeight();
if(index < cols){
heightArr[index] = boxH;
}else{
var minBoxH = Math.min.apply(null, heightArr);
var minBoxIndex = $.inArray(minBoxH, heightArr);
$(value).css({
'position': 'absolute',
'top': minBoxH + 'px',
'left': minBoxIndex * boxW + 'px'
});
heightArr[minBoxIndex] += boxH;
}
});
}
function cheackWillLoad() {
var lastBox = $('#main>.box').last();
var lastBoxDis = $(lastBox).outerHeight() * 0.5 + $(lastBox).offset().top;
var clientH = $(window).height();
var scrollTopH = $(window).scrollTop();
return lastBoxDis <= clientH + scrollTopH;
}