请选择 进入手机版 | 继续访问电脑版

 找回密码
 注册

只需一步,快速开始

蓝色理想 最新研发动态 使用悬赏功能 获得问题最快解答速度 地图任务 - 查看身边的坛友 - 给官方提建议

论坛活动及任务 归纳网站最新活动 请更新论坛注册邮件 积分竞拍第五弹 - 12周年上海聚会报名了

万元奖励等你拿——点点网模板设计大赛 畅销译文征名——让最火的畅销书,印上你的标签 看看有才会员作品,欢迎打分拍砖

查看: 559|回复: 21

如何模仿桌面图标竖排排列? [复制链接]

ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-10-29 15:14:37 |显示全部楼层

如图,图片是腾讯Q+的效果,我想用div+css模拟一个页面,但是默认情况下,容器中的图标列表是横向排列的,一行完了再一行,如何实现左侧竖向排列呢,一排完了再一排?

有谁知道,请赐教,谢谢。
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
努力www.ttde.cn
帖子
647
体力
3259
威望
0
发表于 2011-10-29 16:09:23 |显示全部楼层
本帖最后由 15heaven 于 2011-10-29 16:11 编辑

 提示:您可以先修改部分代码再运行

http://weibo.com/crazyecho
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-10-29 16:11:23 |显示全部楼层
15heaven 发表于 2011-10-29 16:09
[html]
#mainBox{
Writing-mode: tb-lr;

我用ie9测试,是横向排列的,不是竖向排列的呢,请再查查代码,或者是您没有理解我的意思呢
努力www.ttde.cn
帖子
647
体力
3259
威望
0
发表于 2011-10-29 16:12:14 |显示全部楼层

不然就只有用js做了
http://weibo.com/crazyecho
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-10-29 16:17:45 |显示全部楼层
刚刚用火狐和google浏览器都测试了一下,您的代码没有实现。
js的话,我也是一点思维也没有,不知怎么个理论可以实现这个效果。
努力www.ttde.cn
帖子
647
体力
3259
威望
0
发表于 2011-10-29 17:02:22 |显示全部楼层

 提示:您可以先修改部分代码再运行



不知道这样可以不。用css做的时候还需要计算好高度什么的才能让每个浏览器显示一致,比较麻烦。
http://weibo.com/crazyecho
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-10-29 17:05:59 |显示全部楼层
15heaven 发表于 2011-10-29 17:02
[html]

还是不行。
努力www.ttde.cn
帖子
92
体力
416
威望
0
发表于 2011-10-29 17:15:14 |显示全部楼层
15heaven 发表于 2011-10-29 17:02
[html]

簡單的使用css就能模擬桌面圖標排列,我想不是普通的難度吧?
帖子
2
体力
11
威望
0
发表于 2011-10-29 17:29:23 |显示全部楼层
顶了
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-10-29 17:33:03 |显示全部楼层
不一定非得只是用css来实现,如果用简单的js辅助,也是可以的。只要能实现就可以,但最好不要太复杂。
我决定试试分析webqq的方法,如果有结果发给大家。
努力www.ttde.cn

Ragnarok

初级会员  

帖子
33
体力
169
威望
0
发表于 2011-10-29 19:14:50 |显示全部楼层
我用ie9能看到以上代码都是侧竖向排列。。。
是楼主的问题
mio.free35.net
帖子
92
体力
416
威望
0
发表于 2011-10-29 20:16:47 |显示全部楼层
基本上要用原生js解決,還要兼容多數瀏覽器,單就IE版本至少要IE6/7/8/9,
至於其他瀏覽器就不在話下。

時至今日很長一段時間在本論壇尚未見有這樣的代碼,估計不是普通的難度...
曾經見到類似頁面:
http://www.51windows.net/hw/asp/ 這個不兼容,前一版本我貌似1999年看到

http://yclass.com/win98/  這個代碼太多
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-10-31 01:30:51 |显示全部楼层
本帖最后由 ttde 于 2011-10-31 01:31 编辑
AkiyamaMio 发表于 2011-10-29 19:14
我用ie9能看到以上代码都是侧竖向排列。。。
是楼主的问题



这个是我在ie9下看到的效果,火狐和google都是一个效果。所以我不知是我的浏览器哪儿的问题?

--------------------------------------------------------------------------------------------------------------------------
楼上的两个地址效果似乎不错,学习一下。
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
努力www.ttde.cn
帖子
175
体力
750
威望
0
居住地
浙江省 杭州市
发表于 2011-10-31 17:24:29 |显示全部楼层
本帖最后由 tza17313 于 2011-10-31 17:29 编辑

$('#icons_menu').each(
                function(){
                        var lis = $(this).children().children();
                        var li_count=Math.floor(ul_height/100);       
                        for(var i=0,len=lis.length; i<len; i++){
                          lis.style.left=parseInt(i/li_count)*110+"px";
                          lis.style.top=i%li_count*105+ 30 + "px";
                   };                //ul列表 排列 结束
                  
        用JS 实现  希望对你有帮助
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-11-5 00:34:19 |显示全部楼层
tza17313 发表于 2011-10-31 17:24
$('#icons_menu').each(
                function(){
                        var lis = $(this).children().children();

大哥,你的代码完全正确,用这样简单的一个js,就可以实现了,而且代码简洁明了,十分易读。万分感谢。
这个图是我做的一个简单样式,稍后等我整理了代码,发一份比较全的上来。

但是需要提醒大家的是:如果用了js代码,那么,#icons_menu下的ul下的li千万不要用float:left,否则js就不起作用了。
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
努力www.ttde.cn
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-11-5 00:37:45 |显示全部楼层
我没有加css样式,那个比较简单。
jquery我用的是jquery-1.3.2.min.js,很容易找到。
  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />


  5. <script language="javascript" src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  6. </head>

  7. <body>
  8. <div class="menu" id="icons_menu">
  9. <ul>
  10. <li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
  11. <li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
  12. <li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
  13. <li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
  14. <li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
  15. <li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
  16. </ul>
  17. </div>

  18. <script>
  19. $('#icons_menu').each(
  20.                 function(){
  21.                         var lis = $(this).children().children();
  22.                         var li_count=Math.floor(ul_height/100);
  23.                         for(var i=0,len=lis.length; i<len; i++){
  24.                           lis.style.left=parseInt(i/li_count)*110+"px";
  25.                           lis.style.top=i%li_count*105+ 30 + "px";
  26.                    };                //ul列表 排列 结束
  27. </script>

  28. </html>
复制代码
努力www.ttde.cn
帖子
175
体力
750
威望
0
居住地
浙江省 杭州市
发表于 2011-11-5 16:03:16 |显示全部楼层
ttde 发表于 2011-11-5 00:37
我没有加css样式,那个比较简单。
jquery我用的是jquery-1.3.2.min.js,很容易找到。

呵呵 工作 中 要做一个一个 仿win7 界面的WEB 界面  就做了 本来想把代码都贴上的  有点慢  就贴了一段; 你能看懂就行  ; 其实这个 也是我baidu 到 ^_^
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-11-5 16:05:55 |显示全部楼层
今天再次测试代码,发现一个问题,估计还得让高人们指点一下。根据14楼的指点,我改出的16楼的代码,还是有问题的。在图标纵向排列后,当图标多于界面高度的时候,应该自动折行为下一列。现在没有自动折行,而是一直往下排。请看到的高人们,再做指点,谢谢。
努力www.ttde.cn
帖子
175
体力
750
威望
0
居住地
浙江省 杭州市
发表于 2011-11-5 16:11:14 |显示全部楼层
lis.style.left=parseInt(i/li_count)*110+"px";   
  lis.style.top=i%li_count*105+ 30 + "px";
这段 对了吗   
帖子
175
体力
750
威望
0
居住地
浙江省 杭州市
发表于 2011-11-5 16:24:30 |显示全部楼层

 提示:您可以先修改部分代码再运行


现在 可以看了  JS CSS HTML DOM结构 都有了
帖子
175
体力
750
威望
0
居住地
浙江省 杭州市
发表于 2011-11-5 16:32:42 |显示全部楼层
本帖最后由 tza17313 于 2011-11-5 16:33 编辑

咦 怎么不能编辑了-_-!
这是JS的注释
  1. <script type="text/javascript">
  2. var br_height=$(window).height();   //得到当前 浏览器 高度
  3. var ul_height=br_height-100;                //设定 UL列表 的高度  看是否需要  100酌情修改;
  4. $('#icons_menu').each(
  5.                 function(){
  6.                         var lis = $(this).children();        //取得 数组-不知道是否是 这么叫  JS我也只是入门
  7.                         var li_count=Math.floor(ul_height/100);               
  8.                                         //算出 每列 几个图标
  9.                         for(var i=0,len=lis.length; i<len; i++){
  10.                           lis[i].style.left=parseInt(i/li_count)*110+"px";
  11.                           lis[i].style.top=i%li_count*110+ 30 + "px";
  12.                    };                //循环出 每个 图标的 left top 值
  13.                 })
  14. </script>
复制代码
ttde 楼主

天天设计

中级会员  

帖子
121
体力
380
威望
0
发表于 2011-11-5 16:45:11 |显示全部楼层
谢谢你, tza17313,感谢你的详细讲解。
努力www.ttde.cn
您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-1-3 17:26 , Processed in 0.463171 second(s), 15 queries , Gzip On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部