<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style type='text/css'>
.items{margin:0px; position:relative; border:1px solid blue;padding:10px;}
.items .item{
margin:0;
padding:0;
position:absolute;
left:0;
top:0;
width:150px;
border:1px solid red;
list-style:none;
box-sizing:border-box;
}
.items .item img{width:100%;}
</style>
</head>
<body>
<div id="app">
<ul class="items">
<li class='item'><img src="images/1.png"/></li>
<li class='item'><img src="images/2.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/2.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/1.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/2.png"/></li><li class='item'><img src="images/1.png"/></li>
<li class='item'><img src="images/2.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/2.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/1.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/2.png"/></li>
<li class='item'><img src="images/1.png"/></li>
<li class='item'><img src="images/2.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/2.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/1.png"/></li>
<li class='item'><img src="images/3.png"/></li>
<li class='item'><img src="images/2.png"/></li>
</ul>
</div>
<!-- built files will be auto injected -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type='text/javascript'>
$.fn.waterFall=function(){//扩展jquery方法 waterFall 实现瀑布流
var $items=$(this);
var initTop=$items.css('paddingTop').replace('px','');
//获取父元素的宽度innerWidth包含padding值需要减去(不包含border)
var parentWidth=$items.innerWidth()-parseFloat($items.css('paddingLeft').replace('px',''))-parseFloat($items.css('paddingRight').replace('px',''));
var $childItems=$items.children('.item');
var cWidth=$childItems.outerWidth();//获取子元素的宽度，outerWidth包含border padding值
var hArr=[];
var colum=parseInt(parentWidth/cWidth);
var space=parseFloat((parentWidth-cWidth*colum)/(colum-1));
var mIndex=0;
var initLeft=parseFloat($items.css('paddingLeft').replace('px',''));
$childItems.each(function(index,dom){
var $dom=$(dom);
if(index<colum){
$dom.css({
left:initLeft+index*(cWidth+space)+'px',
top:initTop+'px'
});
hArr.push($dom.height()+parseFloat(initTop));
}else{
for(var i=0; i<hArr.length;i++){
if(hArr[i]<hArr[mIndex]){mIndex=i;}
}
$dom.css({
left:initLeft+mIndex*(cWidth+space)+'px',
top:hArr[mIndex]+space+'px'
});
hArr[mIndex]+=$dom.height()+space;
}
});
var mHeight=0;
for(var i=0; i<hArr.length;i++){
if(hArr[i]>mHeight){mHeight=hArr[i];}
}
$items.height(mHeight);
}
$(function(){
//alert($('#ss')[0].offsetWidth-$('#ss')[0].scrollWidth);
$('.items').waterFall();
console.log(document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight));//判断是否有滚动条
if(document.body.scrollHeight>(window.innerHeight||document.documentElement.clientHeight)){
$('.items').waterFall();
}
$(window).on('resize',function(){
$('.items').waterFall();
});
});
</script>
</body>
</html>