代码如下:最好是保存到本地为html文件后用浏览器打开,不停的F5就可以看到LI的宽度为什么是随机的了。(或者是不停的点击下面代码框的运行按钮) 或者访问这个页面   注意:当你刷新页面时,可以看到每一个LI的大小在变化,但是,这只是改变了他们的css,但是li的次序目前是没有变的。

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

想要实现的效果是:
1、用jquery获得浏览器的宽度
2、用jquery获得每一个li的宽度
3、根据浏览器的宽度,重排这些li(不需要考虑次序),以便达到让每一行都尽可能的排满的效果即可!


可以适当参考一下这个实例:                

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


<!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>
2016-02-28 04:38:40

1 Answers

把li放到数组里,然后随机抽取4个作为一行

获取浏览器宽度w,每一行的4个 Li 宽度随机,但是满足宽度加起来为w

这样就ok了,相当简单

2016-02-29 09:35:09
您不能回答该问题或者回答已经关闭!

相关文章推荐

  • C#中using指令的几种用法

    using + 命名空间名字,这样可以在程序中直接用命令空间中的类型,而不必指定类型的详细命名空间,类似于Java的import,这个功能也是最常用的,几乎每个cs的程序都会用到

  • C#实例解析适配器设计模式

    将一个类的接口变成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够一起工作

  • 使用托管C++粘合C#和C++代码(二)

    本文实现一下C++代码调用C#代码的过程。我构造一个简单并且直观的例子:通过C++ UI 触发C# UI.

  • C#开发高性能Log Help类设计开发

    项目中要在操作数据库的异常处理中加入写Log日志,对于商业上有要求,写log时对其它操作尽可能影响小,不能因为加入log导致耗时太多

  • Async和Await使异步编程更简单

    C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作

  • C#开发中的反射机制

    反射的定义:审查元数据并收集关于它的类型信息的能力。元数据(编译以后的最基本数据单元)就是一大堆的表,当编译程序集或者模块时,编译器会创建一个类定义表,一个字段定义表,和一个方法定义表等

  • C#运行时相互关系

    C#运行时相互关系,包括运行时类型、对象、线程栈和托管堆之间的相互关系,静态方法、实例方法和虚方法的区别等等

  • C#协变和逆变

    “协变”是指能够使用与原始指定的派生类型相比,派生程度更大的类型,“逆变”则是指能够使用派生程度更小的类型

  • C#基础概念之延迟加载

    延迟加载(lazy load)是Hibernate3关联关系对象默认的加载方式,延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作

  • 使用托管C++粘合C#和C++代码(一)

    C#在xml读写,数据库操纵,界面构造等很多方面性能卓越;C++的效率高,是底层开发的必备武器

  • C#中的索引器的简单理解和用法

    C#中的类成员可以是任意类型,包括数组和集合。当一个类包含了数组和集合成员时,索引器将大大简化对数组或集合成员的存取操作

  • 深入C# 序列化(Serialize)、反序列化(Deserialize)

    C#中的序列化和反序列化,序列化是.NET运行时环境用来支持用户定义类型的流化的机制