收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 4981|回复: 21

如何模仿桌面图标竖排排列?

  [复制链接]
发表于 2011-10-29 15:14:37 | 显示全部楼层 |阅读模式
未标题-1.jpg
如图,图片是腾讯Q+的效果,我想用div+css模拟一个页面,但是默认情况下,容器中的图标列表是横向排列的,一行完了再一行,如何实现左侧竖向排列呢,一排完了再一排?

有谁知道,请赐教,谢谢。
发表于 2011-10-29 16:09:23 | 显示全部楼层
本帖最后由 15heaven 于 2011-10-29 16:11 编辑

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

回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-10-29 16:11:23 | 显示全部楼层
15heaven 发表于 2011-10-29 16:09
[html]
#mainBox{
Writing-mode: tb-lr;

我用ie9测试,是横向排列的,不是竖向排列的呢,请再查查代码,或者是您没有理解我的意思呢
回复 支持 反对

使用道具 举报

发表于 2011-10-29 16:12:14 | 显示全部楼层
公司电脑是ie8,是对的。
不然就只有用js做了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-10-29 16:17:45 | 显示全部楼层
刚刚用火狐和google浏览器都测试了一下,您的代码没有实现。
js的话,我也是一点思维也没有,不知怎么个理论可以实现这个效果。
回复 支持 反对

使用道具 举报

发表于 2011-10-29 17:02:22 | 显示全部楼层

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



不知道这样可以不。用css做的时候还需要计算好高度什么的才能让每个浏览器显示一致,比较麻烦。
才发现这里是前台脚本版……
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-10-29 17:05:59 | 显示全部楼层
15heaven 发表于 2011-10-29 17:02
[html]

还是不行。
回复 支持 反对

使用道具 举报

发表于 2011-10-29 17:15:14 | 显示全部楼层
15heaven 发表于 2011-10-29 17:02
[html]

簡單的使用css就能模擬桌面圖標排列,我想不是普通的難度吧?
回复 支持 反对

使用道具 举报

发表于 2011-10-29 17:29:23 | 显示全部楼层
顶了:p
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-10-29 17:33:03 | 显示全部楼层
不一定非得只是用css来实现,如果用简单的js辅助,也是可以的。只要能实现就可以,但最好不要太复杂。
我决定试试分析webqq的方法,如果有结果发给大家。
回复 支持 反对

使用道具 举报

发表于 2011-10-29 19:14:50 | 显示全部楼层
我用ie9能看到以上代码都是侧竖向排列。。。
是楼主的问题
回复 支持 反对

使用道具 举报

发表于 2011-10-29 20:16:47 | 显示全部楼层
基本上要用原生js解決,還要兼容多數瀏覽器,單就IE版本至少要IE6/7/8/9,
至於其他瀏覽器就不在話下。

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

http://yclass.com/win98/  這個代碼太多
回复 支持 反对

使用道具 举报

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


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

--------------------------------------------------------------------------------------------------------------------------
楼上的两个地址效果似乎不错,学习一下。
回复 支持 反对

使用道具 举报

发表于 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[i].style.left=parseInt(i/li_count)*110+"px";
                          lis[i].style.top=i%li_count*105+ 30 + "px";
                   };                //ul列表 排列 结束
                  
        用JS 实现  希望对你有帮助
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-5 00:34:19 | 显示全部楼层
tza17313 发表于 2011-10-31 17:24
$('#icons_menu').each(
                function(){
                        var lis = $(this).children().children();

大哥,你的代码完全正确,用这样简单的一个js,就可以实现了,而且代码简洁明了,十分易读。万分感谢。
这个图是我做的一个简单样式,稍后等我整理了代码,发一份比较全的上来。
QQ截图20111105003040.png
但是需要提醒大家的是:如果用了js代码,那么,#icons_menu下的ul下的li千万不要用float:left,否则js就不起作用了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 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>
复制代码
回复 支持 反对

使用道具 举报

发表于 2011-11-5 16:03:16 | 显示全部楼层
ttde 发表于 2011-11-5 00:37
我没有加css样式,那个比较简单。
jquery我用的是jquery-1.3.2.min.js,很容易找到。

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

使用道具 举报

 楼主| 发表于 2011-11-5 16:05:55 | 显示全部楼层
今天再次测试代码,发现一个问题,估计还得让高人们指点一下。根据14楼的指点,我改出的16楼的代码,还是有问题的。在图标纵向排列后,当图标多于界面高度的时候,应该自动折行为下一列。现在没有自动折行,而是一直往下排。请看到的高人们,再做指点,谢谢。
回复 支持 反对

使用道具 举报

发表于 2011-11-5 16:11:14 | 显示全部楼层
lis.style.left=parseInt(i/li_count)*110+"px";   
  lis.style.top=i%li_count*105+ 30 + "px";
这段 对了吗   
回复 支持 反对

使用道具 举报

发表于 2011-11-5 16:24:30 | 显示全部楼层
  

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


现在 可以看了  JS CSS HTML DOM结构 都有了
回复 支持 反对

使用道具 举报

发表于 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>
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-11-5 16:45:11 | 显示全部楼层
谢谢你, tza17313,感谢你的详细讲解。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-28 19:18 , Processed in 0.140269 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表