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

设为首页收藏本站腾讯微博新浪微博

客服QQ 800003860 切换到窄版

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

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

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

经典论坛 › 论坛 › 网站开发区 › 前台制作与脚本专栏 › 如何模仿桌面图标竖排排列？

查看: 559|回复: 21

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

ttde　楼主

天天设计

中级会员 

帖子: 121
体力: 380
威望: 0

发表于 2011-10-29 15:14:37 |显示全部楼层

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

有谁知道，请赐教，谢谢。

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

努力www.ttde.cn

西部数码顶级域名注册商39元抢注！Flash游戏开发培训

使用道具举报

疯铮

金牌会员 

帖子: 647
体力: 3259
威望: 0

发表于 2011-10-29 16:09:23 |显示全部楼层

本帖最后由 15heaven 于 2011-10-29 16:11 编辑

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

http://weibo.com/crazyecho

租服务器，上51IDC [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

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/　這個不兼容，前一版本我貌似１９９９年看到

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，很容易找到。

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<script language="javascript" src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
<div class="menu" id="icons_menu">
<ul>
<li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
<li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
<li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
<li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
<li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
<li><a href="#"><img src="images/icon1.png"/><br/>首页</a></li>
</ul>
</div>
<script>
$('#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列表排列结束
</script>
</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 |显示全部楼层

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>li竖排</title>

<style type="text/css">
*{ margin:0; padding:0;}
#icons_menu{ position:relative; margin-left:10px;}
#icons_menu li{ position:absolute; width:100px; height:100px; background:#333; color:#FFF; text-align:center; line-height:100px;}
</style>
</head>

<body>
<ul id="icons_menu">
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
  <li>图标</li>
</ul>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var br_height=$(window).height();
var ul_height=br_height-100;
 $('#icons_menu').each(
		function(){
			var lis = $(this).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*110+ 30 + "px"; 
		   };		//ul列表 排列 结束
		})
</script>
</html>

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

现在可以看了 JS CSS HTML DOM结构都有了

使用道具举报

高级会员 

帖子: 175
体力: 750
威望: 0
居住地: 浙江省杭州市

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

本帖最后由 tza17313 于 2011-11-5 16:33 编辑

咦怎么不能编辑了-_-!
这是JS的注释

<script type="text/javascript">
var br_height=$(window).height(); //得到当前浏览器高度
var ul_height=br_height-100; //设定 UL列表的高度看是否需要 100酌情修改；
$('#icons_menu').each(
function(){
var lis = $(this).children(); //取得数组-不知道是否是这么叫 JS我也只是入门
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*110+ 30 + "px";
}; //循环出每个图标的 left top 值
})
</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.

回顶部