您的位置：首页 > Web前端 > JavaScript

【js】流式布局页面

2015-07-07 21:13 579 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

【js】 流式布局 页面

【js】流式布局页面