首页 新闻 赞助 找找看

怎么写css和js实现如下效果,求大神请教

0
悬赏园豆:10 [已解决问题] 解决于 2015-08-14 14:52

 

每行递减,  ul li的宽度自动变化大小

数据都是从数据库中读取

Payton的主页 Payton | 初学一级 | 园豆:159
提问于:2015-08-14 12:06
< >
分享
最佳答案
0
<html>
<head>
    <title></title>
    <script type="application/javascript" src="scripts/jquery-2.1.3.min.js"></script>
    <script type="application/javascript">

        function Output(data)
        {
            var width=$("#d").css("width");
            var i=data.length;
            while(i>0)
            {
                var div="<div style=\"width:100%\"><ul>";
                for(var n=0;n<i;n++)
                {
                    div+="<li style=\"width:"+((100/i)-0.1*data.length)+"%\">"+data[n]+"</li>";
                }
                div+="</ul></div>";
                $("#d").append(div);
                i--;
            }
        }
    </script>
    <style type="text/css">
        #d{
            width:500px;
        }
        div{
            margin: 1px;
            clear: both;
        }
        ul{
            margin: 1px;
        }
        li{
            list-style: none;
            background: gray;
            text-align:center;
            display: inline-block;
            margin: 1px;
        }
    </style>
</head>
<body>
<div id="d"></div>
<script type="application/javascript">
    Output(["a","b","c","d","e"]);
</script>
</body>
</html>
收获园豆:10
Yu | 专家六级 |园豆:12980 | 2015-08-14 14:43

虽然问题已经解决了,但是你的代码也是可行的方法。谢谢

Payton | 园豆:159 (初学一级) | 2015-08-14 14:53
其他回答(4)
0

如果我来做,就用Bootstrap,可以看下Boostrap的这个示例,http://v3.bootcss.com/examples/grid/

jackccc | 园豆:1341 (小虾三级) | 2015-08-14 12:12

这样也不好判断数据库读取出了多少条数据啊

支持(0) 反对(0) Payton | 园豆:159 (初学一级) | 2015-08-14 12:25
0

用js算宽度就好了哇。。。

幻天芒 | 园豆:37175 (高人七级) | 2015-08-14 12:39

小女子不知,望大神再指点一二

非常感谢

支持(0) 反对(0) Payton | 园豆:159 (初学一级) | 2015-08-14 12:53
0

问题描述的不是很清楚呢。是想排成4个-3个-2个-1个这样还是每个li的宽度因为文字数不同而不定?  如果单纯的想排成这样,25% 33% 50% 100%就好了。如果想要宽是后台定直接通过js获取或者传入宽度值。

McChen | 园豆:204 (菜鸟二级) | 2015-08-14 13:37
0

一:如果出现3个-3个-2个-1个,是不是也按这种排列方式排列?

二:如果是的话,1.查询数据库汇总共有多少条数据,以确定共有多少行,计算公式:(1+n)*n/2=总条数;

        2.获多少行后,每行的宽度为(100%/index) index代表倒数第几行;

        3.最上面一行可能出现1个,2个或3个等情况,这种情况得你自己决定怎么安排。

三:可以使用jQuery AJAX获得数据。

火悬崖 | 园豆:434 (菜鸟二级) | 2015-08-14 14:21

虽然问题已经解决了,但是还是谢谢你的回答

支持(0) 反对(0) Payton | 园豆:159 (初学一级) | 2015-08-14 14:54

@久奺: 可以问一下你的解决思路吗?

支持(0) 反对(0) 火悬崖 | 园豆:434 (菜鸟二级) | 2015-08-14 14:58
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册