//html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<link rel="stylesheet" type="text/css" href="STYLE.css">
</head>
<style>
*{
margin: 0;
padding:0;
}
#main{
position: relative;
}
.box{
float: left;
}
.pic{
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.pic img {
width: 165px;
height: auto;
}
</style>
<body> <div id="main"> <div class="box"> <div class="pic"><img src="./images/P_00.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_01.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_02.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_03.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_04.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_05.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_06.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_07.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_08.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_09.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_010.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_011.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_012.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_013.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_014.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_015.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_016.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_017.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_018.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/P_019.jpg" alt=""></div> </div> <div class="box"> <div class="pic"><img src="./images/toTop.gif" alt=""></div> </div> </div> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="script.js" type="text/javascript"></script> </body> </html>
//JQuery文件
$(window).on('load',function(){
waterfull();
//实现加载
var dateInt={"data":[{"src":'P_00.jpg'},{"src":'P_01.jpg'},{"src":'P_02.jpg'},{"src":'P_03.jpg'}]};
$(window).on('scroll',function(){
if(checkScrollSlide){
$.each(dateInt.data,function(key,value){
var oBox = $('<div>').addClass('box').appendTo($('#main'));
var oPic = $('<div>').addClass('pic').appendTo($(oBox));
var oImg = $('<img>').attr('src','./images/'+$(value).attr('src')).appendTo($(oPic));
})
}
waterfull();
})
});
function waterfull(){
var $boxs = $('#main>div');
var w = $boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width()/w);
$('main').width(w*cols).css('margin','0 auto');
var hArr = [];
$boxs.each(function(index,value){
var h = $boxs.eq(index).outerHeight()
if(index<cols){
hArr[index]=h;
}else {
var minH = Math.min.apply(null,hArr);
var minHindex = $.inArray(minH,hArr);
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHindex*w+'px'
})
hArr[minHindex] += $boxs.eq(index).outerHeight();
}
})
}
function checkScrollSlide(){
var $lastbox = $('#main>div').last();
var lastBoxDis = $lastbox.offset().top+Math.floor($lastbox.ouertHeight()/2);
var scrollTop = $(window).scrollTop();
var documentH = $(window).height();
return (lastBoxDis<scrollTop+documentH)?true:false;
}
