<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
*{padding:0; margin:0;}
.box{margin:30px; position: relative;}
.item{width:300px; padding:5px; border:1px solid #e0e0e0; position: absolute; transition: 0.5s; margin:10px;}
.item img{width:300px; display: inline-block;}
</style>
</head>
<body>
<div class="box">
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
<div class="item"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546838507704&di=62429ee5cbd77940f1e33bf8af2437f2&imgtype=0&src=http%3A%2F%2Fimg04.tooopen.com%2Fimages%2F20130916%2Fsy_41625094915.jpg" alt=""></div>
</div>
<script type="text/javascript">
$(function(){
init();
$(window).on("resize",function(){
init();
})
//outwidth padding+margin+border的宽度
function init(){
var boxWidth=$('.item').outerWidth(true);
var cols=parseInt($(window).width()/boxWidth);
var heightArr=[];
for(var i=0; i<cols;i++){
heightArr.push(0);
}
$(".item").each(function(index,item){
var idx=0;
var minBoxHeight=heightArr[0];
for(var i=0;i<heightArr.length;i++){
if(heightArr[i]<minBoxHeight){
minBoxHeight=heightArr[i];
idx=i;
console.log(i)
}
}
$(item).css({
left:boxWidth*idx,
top:minBoxHeight
})
heightArr[idx]+=$(item).outerHeight(true);
})
}
})
</script>
</body>
</html>
网友评论