<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta charset="utf-8" />
<style type="text/css">
.eblock{ position: absolute;width:200px;min-height:300px; border:1px solid #F00;}
</style>
<script src="http://r.ytrss.com/rs/js/yintaih5/h5js/lib/jquery.js"></script>
<script type="text/javascript">
$(function() {
var current;
var rowfirst;
var rowsecond;
var rowthrid;
var rowfourth;
var index = 1;
$(".eblock").each(function() {
current = $(this);
// 获取首行元素
if (index <= 4) {
if (index % 4 == 1) {
rowfirst = $(this);
} else if (index % 4 == 2) {
rowsecond = $(this);
} else if (index % 4 == 3) {
rowthrid = $(this);
} else if (index % 4 == 0) {
rowfourth = $(this);
}
}
if (index > 4) {
if (index % 4 == 1) {
current.css("top", rowfirst.position().top + rowfirst.height() + 10 + "px");
current.css("left", rowfirst.position().left + "px");
rowfirst = $(this);
} else if (index % 4 == 2) {
current.css("top", rowsecond.position().top + rowsecond.height() + 10 + "px");
current.css("left", rowsecond.position().left + "px");
rowsecond = $(this);
} else if (index % 4 == 3) {
current.css("top", rowthrid.position().top + rowthrid.height() + 10 + "px");
current.css("left", rowthrid.position().left + "px");
rowthrid = $(this);
} else if (index % 4 == 0) {
current.css("top", rowfourth.position().top + rowfourth.height() + 10 + "px");
current.css("left", rowfourth.position().left + "px");
rowfourth = $(this);
}
}
index++;
});
});
//$(function() {
// $(".eblock").each(function() {
// alert($(this).css("height"));});
//});
</script>
</head>
<body style="margin: 0 auto; margin:0">
<div style="border:1px solid #F00; top: 200px; left: 240px;" class="eblock">fdgxcv
</div>
<div style=" border:1px solid #F00; top: 200px; left: 500px;" class="eblock"> xcvxcvxv
</div>
<div style=" border:1px solid #F00; top: 200px; left: 760px;" class="eblock"> xcvxcvxv
</div>
<div style=" border:1px solid #F00; top: 200px; left: 1020px;" class="eblock"> xcvxcvxv
</div>
<div class="eblock">
</div>
<div class="eblock"> 22
</div>
<div class="eblock">23
</div>
<div class="eblock"> 24
</div>
<div class="eblock"> 31
</div>
<div class="eblock"> 32
</div>
<div class="eblock"> xcvxcvxv
</div>
<div class="eblock"> xcvxcvxv
</div>
</body>
</html>
原文：http://www.cnblogs.com/viewcozy/p/4628545.html