<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>瀑布流佈局</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<!--<script type="text/javascript" src="js/script.js" ></script>-->
<script type="text/javascript" src="js/JQ.js" ></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="img/0.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/1.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/2.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/3.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/4.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/5.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/6.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/7.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/8.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/9.jpg"/>
</div>
</div><div class="box">
<div class="pic">
<img src="img/10.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/11.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/12.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/13.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/14.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/15.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/16.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/17.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/18.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/19.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/20.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/21.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/22.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/23.jpg"/>
</div>
</div><div class="box">
<div class="pic">
<img src="img/24.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/25.jpg"/>
</div>
</div><div class="box">
<div class="pic">
<img src="img/26.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/27.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/28.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/29.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/30.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/31.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/32.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/33.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/34.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/35.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/36.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/37.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/38.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/39.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/40.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/41.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/42.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/43.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/44.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/45.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/46.jpg"/>
</div>
</div>
<div class="box">
<div class="pic">
<img src="img/47.jpg"/>
</div>
</div>
</div>
</body>
</html>
$(window).on('load',function(){
waterfall();
var dataInt = {"data":[{"src":"48.jpg"},{"src":"49.jpg"},{"src":"50.jpg"},{"src":"51.jpg"},{"src":"52.jpg"},{"src":"53.jpg"},{"src":"54.jpg"}]};
$(window).on('scroll',function(){
if(checkscrollside){
$.each(dataInt.data,function(key,value){
var oBox = $('<div>').addClass('box').appendTo($('#main'));
var oPic = $('<div>').addClass('pic').appendTo($(oBox));
$('<img>').attr('src','img/'+$(value).attr('src')).appendTo(oPic);
})
waterfall();
}
})
})
function waterfall(){
var $boxs = $("#main>div");
var w = $boxs.eq(0).outerWidth();
var cols = Math.floor($(window).width()/w);
$('#main').width(cols*w).css('margin','0 auto');
var hArr = [];
$boxs.each(function(index,value){
var h = $boxs.eq(index).outerHeight();
if(index<cols){
hArr.push(h);
}else{
var minH = Math.min.apply(null,hArr);
var minHIndex = $.inArray(minH,hArr);
console.log(value);
$(value).css({
'position':'absolute',
'top':minH+'px',
'left':minHIndex*w+'px'
})
hArr[minHIndex]+=$boxs.eq(index).outerHeight();
}
})
}
function checkscrollside(){
var $lastBox = $('#main>div').last();
var lastBoxis = $lastBox.offset().top + Math.floor($lastBox.outerHeight()/2);
var scrollTop = $(window).scrollTop();
var documentH = $(window).height();
return (lastBoxis<(scrollTop+documentH))?true:false;
}
