UL下一组宽度随机的LI如何自动重排难题。

iou3344999 发布于 2016/02/28 08:16
阅读 92
收藏 0

代码如下:最好是保存到本地为html文件后用浏览器打开,不停的F5就可以看到LI的宽度为什么是随机的了。(或者是不停的点击下面代码框的运行按钮) 或者访问这个页面 http://iou33449999.usa3v.com/index.html  

注意:当你刷新页面时,可以看到每一个LI的大小在变化,但是,这只是改变了他们的css,但是li的次序目前是没有变的。


现有代码中的js只是为了获取随机的CSS名称;style设置了6种样式;HTML部分是简单的规范结构。

想要实现的效果是:
1、用jquery获得浏览器的宽度
2、用jquery获得每一个li的宽度

3、根据浏览器的宽度,重排这些li(不需要考虑次序),以便达到让每一行都尽可能的排满的效果即可!

4、动态效果就别弄了,有好结果就行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>每刷新一次li的样式大小都变一次,如何排列的更美观呢?</title>
<script src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
	 var lis = $("li");
		 lis.each(function(){
		 	element = $(this).find('span').first();
			var x = 6;
			var y = 1;
			var a = 10;
			var b = 1;
			var rand = parseInt(Math.random() * (x - y + 1) + y);
			var frand = parseInt(Math.random() * (a - b + 1) + b);
			$(this).addClass("li"+rand);
			$(this).addClass("fsize"+frand);
			$(element).addClass("span"+rand);
			$(element).addClass("fsize"+frand);
		  });
  })  
</script>

<style type="text/css">
*{margin:0; border:0; padding:0;}
#leftfloat ul{list-style:none;}
#leftfloat li{display:block;float:left;margin:10px;padding:0px;border-radius:4px 4px 4px 4px;box-shadow:0 1px 3px rgba(34, 25, 25, 0.2);}
#leftfloat li span {color:white;margin:0 5px 0 0;border-radius:4px 0px 0px 4px;float:left;text-align:center;min-width:45px;}

.li1{border:2px solid #8BF0DE;background-color:#8BF0DE;}
.span1{border:1px solid #61B0D8;background-color:#61B0D8;}

.li2{border:2px solid #8FB88F;background-color:#8FB88F;}
.span2{border:2px solid #447D44;background-color:#447D44;}

.li3{border:2px solid #667AB7;background-color:#667AB7;}
.span3{border:2px solid #786070;background-color:#786070;}

.li4{border:2px solid #F0AD4E;background-color:#F0AD4E;}
.span4{border:2px solid #EF771F;background-color:#EF771F;}

.li5{border:2px solid #D7864F;background-color:#D7864F;}
.span5{border:2px solid #F7607F;background-color:#F7607F;}

.li6{border:2px solid #414147;background-color:#414147;}
.span6{border:2px solid #717177;background-color:#717177;}

.fsize1{font-size:24px;}
.fsize2{font-size:28px;}
.fsize3{font-size:32px;}
.fsize4{font-size:36px;}
.fsize5{font-size:26px;}
.fsize6{font-size:34px;}
.fsize7{font-size:22px;}
.fsize8{font-size:40px;}
.fsize9{font-size:38px;}
.fsize10{font-size:30px;}

#leftfloat li a{text-decoration:none;color:white;text-align:left;}
#leftfloat li a:hover{color:#ffffff;}
</style>
</head>
<body>
<div id="leftfloat">
  <ul>
		<li><a href="#">凯特·布兰切特</a><span>2266 </span></li>
		<li><a href="#">桑德拉·布洛克</a><span>2213 </span></li>
		<li><a href="#">艾米·亚当斯</a><span>1098 </span></li>
		<li><a href="#">梅丽尔·斯特里普</a><span>2315 </span></li>
		<li><a href="#">朱迪·丹奇</a><span>1547 </span></li>
		<li><a href="#">朱丽安·摩尔</a><span>662 </span></li>
		<li><a href="#">玛丽昂·歌迪亚</a><span>1447 </span></li>
		<li><a href="#">罗莎曼德·派克</a><span>1480 </span></li>
		<li><a href="#">菲丽希缇·琼斯</a><span>1942 </span></li>
		<li><a href="#">瑞茜·威瑟斯彭</a><span>1831 </span></li>
		<li><a href="#">詹妮弗·劳伦斯</a><span>1733 </span></li>
		<li><a href="#">杰西卡·查斯坦</a><span>1715 </span></li>
		<li><a href="#">埃玛妞·丽娃</a><span>660 </span></li>
		<li><a href="#">夸文贾妮·沃雷斯</a><span>880 </span></li>
		<li><a href="#">娜奥米·沃茨</a><span>418 </span></li>
		<li><a href="#">维奥拉·戴维斯</a><span>1135 </span></li>
		<li><a href="#">格伦·克洛斯</a><span>2135 </span></li>
		<li><a href="#">鲁妮·玛拉</a><span>1282 </span></li>
		<li><a href="#">米歇尔·威廉姆斯</a><span>1473 </span></li>
		<li><a href="#">娜塔丽·波特曼</a><span>600 </span></li>
		<li><a href="#">妮可·基德曼</a><span>1222 </span></li>
		<li><a href="#">安妮特·贝宁</a><span>402 </span></li>
		<li><a href="#">海伦·米伦</a><span>1227 </span></li>
		<li><a href="#">凯芮·穆里根</a><span>895 </span></li>
		<li><a href="#">加布蕾·丝迪贝</a><span>2022 </span></li>
		<li><a href="#">梅丽尔·斯特丽普</a><span>2044 </span></li>
		<li><a href="#">凯特·温斯莱特</a><span>1740 </span></li>
		<li><a href="#">安妮·海瑟薇</a><span>2124 </span></li>
		<li><a href="#">安吉丽娜·朱莉</a><span>558 </span></li>
		<li><a href="#">梅莉莎·李奥</a><span>533 </span></li>
		<li><a href="#">朱莉·克里斯蒂</a><span>931 </span></li>
		<li><a href="#">劳拉·琳妮</a><span>1709 </span></li>
		<li><a href="#">艾莲·佩奇</a><span>991 </span></li>
		<li><a href="#">佩内洛普·克鲁兹</a><span>1822 </span></li>
		<li><a href="#">瑞茜·威瑟斯朋</a><span>1973 </span></li>
		<li><a href="#">菲丽西提·霍夫曼</a><span>2269 </span></li>
		<li><a href="#">凯拉·奈特利</a><span>589 </span></li>
		<li><a href="#">查理兹·赛隆</a><span>480 </span></li>
		<li><a href="#">希拉里·斯旺克</a><span>995 </span></li>
		<li><a href="#">卡塔琳娜·桑迪诺·莫雷诺</a><span>1362 </span></li>
		<li><a href="#">伊美黛·史道顿</a><span>1084 </span></li>
		<li><a href="#">安妮特·班宁</a><span>1820 </span></li>
  </ul>
</div>
</body>
</html>

可以适当参考一下这个实例:http://www.jb51.net/article/30115.htm                

但是他的扩展性。。唉~~~~~


加载中
返回顶部
顶部