标签：
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap</title>
<!-- <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> -->
<link rel="stylesheet" type="text/css" href="foo.css">
<script src="jquery-1.11.3.js"></script>
<!-- <script src="bootstrap.min.js"></script> -->
<!-- <script src="myjQuery.js"></script> -->
<script src="foo.js"></script>
</head>
<body>
<div id="container">
<div class="box">
<div class="content">
<img src="img/1.jpg">
<p>hello world</p>
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/10.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/10.jpg">
</div>
</div>
</div>
</body>
</html>
-------------------------
<div id="container">
<div class="box">
<div class="content">
<img src="img/1.jpg">
<p>hello world</p>
</div>
</div>
</div>
css:
*{
padding: 0;
margin: 0;
}
.box{
position: relative;
float: left;
}
.content{
margin: 10px;
padding: 0px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.content img{
width: 359px;
height: auto;
}
js:
$(document).ready(function(){
$(window).on("load",function(){
imgLocation();
});
});
function imgLocation(){
var box = $(".box");
var boxWidth = box.eq(0).width();
var num = Math.floor($(window).width()/boxWidth);
var boxArr = [];
box.each(function(index,value){
var boxHeight = box.eq(index).height();
if(index<num){
boxArr[index] = boxHeight;
}else{
var minboxHeight = Math.min.apply(null,boxArr);
var minboxIndex = $.inArray(minboxHeight,boxArr);
$(value).css({
"position": "absolute",
"top": minboxHeight,
"left": box.eq(minboxIndex).position().left//; not
});
boxArr[minboxIndex] += box.eq(index).height();
}
});
}
//function(index,value) index and value are array
//console.log(index+"--"+value);
//console.log(boxHeight);
//console.log(minboxHeight);
//console.log(minboxIndex);
// console.log(value);
标签：
原文地址：http://www.cnblogs.com/htmlphp/p/4840857.html
