怎样用jquery实现li的定位是绝对定位，且占满一行后自动换行？

我想要的效果是，每个li的定位都是absolute，且li都横向排列，沾满父级元素以后自动换行从该行的最左边开始。代码如下：我写的代码要怎么该，或有什么更好的实现方式？？... 我想要的效果是，每个li的定位都是absolute，且li都横向排列，沾满父级元素以后自动换行从该行的最左边开始。

代码如下：我写的代码要怎么该，或有什么更好的实现方式？？？PS：li必须是absolute的方式布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="images/jquery-1.8.2.min.js"></script>
<style type="text/css">
.ruler{ height:0px;}
.all_items{ margin:0; padding:0;}
.all_items ul{ margin:0; padding:0; position:relative;zoom:1; /* IE */ float:left; height:auto; }
.all_items ul:after { content:"."; display:block; clear:both; height:0; }
.item{ list-style-type:none; position:absolute; width:100px; height:100px; background-color:#099; margin-left:10px; margin-top:10px;}
</style>
<script type="text/javascript">
$(function(){
$length=$(".item").length;
$ruler=$(window).width();
$(".ruler").css("width",$ruler);

//alert($length)
$(".item").each(function(){
$index=$(this).index();
$top=$(this).position().top;
$left=$(this).position().left;
$item_width=$(this).outerWidth(true);
$item_height=$(this).outerHeight(true);
alert($index);

$item_left=($index+1)*$item_width;

alert($item_left);

$i=0;

if($item_left<$ruler){
$(this).next().css({"left":$item_left,"top":$top});
}
if($item_left>=$ruler){

$i++;
$j=0;
$item_top=$i*$item_height;
$(this).next().css({"left":$item_left,"top":$item_top});
}
})
})
</script>
<title>无标题文档</title>
</head>

<body>
<div class="all_items">
<div class="ruler"></div>
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</body>
</html> 展开

 我来答

2个回答

#热议# 空调使用不当可能引发哪些疾病？

youe
推荐于2016-07-19 · TA获得超过209个赞

知道小有建树答主

回答量：140

采纳率：100%

帮助的人：89.5万

我也去答题访问个人页

关注

展开全部

html

<li></li>

jq
$("li").css("position","absolute");
$("li").css("min-height","100px");
$("li").css("width","100%");
$("li").css("background-color","#000");

已赞过 已踩过<

评论收起

摩惠然0iD
2013-04-07 · TA获得超过1634个赞

知道小有建树答主

回答量：1162

采纳率：100%

帮助的人：837万

我也去答题访问个人页

关注

展开全部

瀑布流布局，你的思路太简单了，实际情况要复杂很多，看下花瓣网，我不想多说，你搜瀑布流布局网上有很多解决方案。看看有没有热心同学帮助

本回答被提问者采纳

已赞过已踩过<

你对这个回答的评价是？
评论收起

1条折叠回答

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

怎样用jquery实现li的定位是绝对定位，且占满一行后自动换行？

其他类似问题

为你推荐：