使用jquery实现li的均匀排版

Posted on 2010-04-13 21:46 peswe 阅读(1530) 评论(0) 编辑收藏举报

有时候需要用循环列出不确定个数的box模型，用table的话，就比较麻烦，需要判断tr、td的数量；

这时可以用li进行简单替换，然后设置float:left就可以了，例如：
<!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=gb2312" /> <title>smart columns</title> </head> <body> <style> ul{width:100%;padding:0px;margin:0px;list-style:none;} ul li{float:left;width:237px;margin-top:5px;border:1px solid red;height:100px;margin-left:5px;} </style> <ul> <li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li> <li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li> <li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li> <li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li><li>some list</li> </ul> </body> </html>

以上代码可以实现排列，但是效果不是很好，在右边可能会出现空白；

为了使li均匀分布，我们可以先给li设置固定的宽度，然后在页面加载的时候判断浏览器的可视宽度，求出每行最多可以容纳多少个li
剩余的空白，可以在li内部加div，进行自动填充；修改后的代码：
<!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=gb2312" /> <title>smart columns</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script></head> <body> <style> ul{width:100%;padding:0px;margin:0px;list-style:none;} ul li{float:left;width:237px;margin-top:5px;} div{border:1px solid red;height:100px;margin-left:5px;} </style> <ul> <li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li> <li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li> <li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li> <li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li><li><div>some list</div></li> </ul> <script> function smart_change(){ $('ul').css({width:'100%'}) var total_width = $('ul').width(); var max_count = Math.floor(total_width/237) var m_width = Math.floor(total_width/max_count) $('ul').css({width:total_width}) $('li').css({width:m_width}) } $(function(){smart_change();}); $(window).resize(function(){smart_change();}); </script></body> </html>

注：以上代码在ie中需要刷新后查看效果

参考：http://www.sohtanaka.com/web-design/smart-columns-w-css-jquery/

刷新页面返回顶部

peswe

公告

使用jquery实现li的均匀排版