发新贴  快速回复

div逢10换行

董董
2014-11-18 17:20
 本帖最后由 董董 于 2014-11-18 17:21 编辑 

div逢10换行;我的有问题大家帮看看,谢谢了...
源码:
     for(var i=0; i<30; i++){
            document.body.innerHTML+='<div class="ibox">'+(i+1)+'</div>';
        }

        var aIbox=document.getElementsByTagName('div');

        for(var i=0; i<aIbox.length; i++){
            if (i<10) {
                aIbox[i].style.left=10+i*110+'px';
            }else{       
                aIbox[i].style.left=10+i%10*110+'px';
                if (i%10!=0) {
                    aIbox[i].style.top=110+'px';
                }else{
                    aIbox[i].style.top=110+i%10*110+'px';
                };              
            };
        }[i][i][i]

目前我做:[i][i][i]
[img]E:\dd[/img]
老王爱js
把你的代码打包发上来看下!
2014-11-18 17:36  回复本帖
董董
forum.php?mod=redirect&goto=findpost&pid=32399&ptid=10269
把你的代码打包发上来看下!

恩,好的,
2014-11-19 09:11  回复本帖
tuoyuan
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>js</title>
    <script>
    window.err==function(){
/*
        (function(){

            var oBox=document.getElementById('box');
            var oBut=document.getElementById('but');
            var oBut2=document.getElementById('but2');
            var i=14;

            oBut.err==function(){
                if (i<24) {
                i++;
                oBox.style.fontSize=i+'px'
                };
            }
            oBut2.err==function(){
                 if (i>14) {
                i--;
                oBox.style.fontSize=i+'px'
                };
            }

        })();
*/
/*
    (function(){

        var arr=['a','b','c']
        arr.push('d','e');
        alert(arr.length+arr);

    })()
*/
/*
    (function(){
        var oInp=document.getElementsByTagName('input')[0];
        alert(oInp.value);
    })()
*/

    (function(){
        

        for(var i=0; i<30; i++){
            document.body.innerHTML+='<div class="ibox">'+(i+1)+'</div>';
        }

        var aIbox=document.getElementsByTagName('div');
        var k = 0;

        for(var i=0; i<aIbox.length; i++){
                if(i!=0 && i%10 == 0){
                   k++;
                }
                aIbox[i].style.left =10 + 110*(i-10*k);
                aIbox[i].style.top = 110*k;            
        }
    }
    )()

    };
    </script>
    <style>
        *{border: 0px;margin: 0px;padding: 0px;font-size: 14px;font-family: "微软雅黑";}
        #box{background: #ccc;padding: 10px;}
        #but,#but2{width: 50px;height: 24px;border: 1px solid #ccc;text-align: center;line-height: 24px;margin: 10px;}

        .ibox{width: 100px;height: 100px;background: green;position: absolute;color: #fff;font-size: 24px;text-align: center;line-height: 100px;}
    </style>
</head>
<body>
    <!-- <div id="box">
        董永...董永...董永...董永...董永...董永...董永...董永...董永...董永...董永...董永...董永...董永...董永...
    </div>
    <input type="button" id="but" value="+" />
    <input type="button" id="but2" value="-" /> -->
</body>
</html>

2014-11-19 11:35  回复本帖
老王爱js
不知道是不是你想要的:

(function(){
        

        for(var i=0; i<30; i++){
            document.body.innerHTML+='<div class="ibox">'+(i+1)+'</div>';
        }

        var aIbox=document.getElementsByTagName('div');

        for(var i=0; i<aIbox.length; i++){
            if(i%10 == 0){
                var num = i;
                var j = 0;
            };

           aIbox[i].style.top = num*12 + "px";
           aIbox[i].style.left = (j++)*110 + "px";
        }

    })()
2014-11-19 12:56  回复本帖
老王爱js
相比之下,下一种好理解一点:
(function() {

            for (var i = 0; i < 30; i++) {
                document.body.innerHTML += '<div class="ibox">' + (i + 1) + '</div>';
            }

            var aIbox = document.getElementsByTagName('div');
            var k = 0;

            for (i = 0; i < oDiv.length; i++) {
                if (i < 10) {
                    aIbox[i].style.left = 120 * i + "px";
                    aIbox[i].style.top = 120 + 'px';
                } else {
                    var n1 = i % 10;
                    var n2 = parseInt(i/10)+1;
                    aIbox[i].style.left = 120 * n1 + 'px';
                    aIbox[i].style.top = 120 * n2 + 'px';

                }

            }
        })()
2014-11-19 13:38  回复本帖
tuoyuan
 (function(){


        for(var i=0; i<30; i++){
            document.body.innerHTML+='<div class="ibox">'+(i+1)+'</div>';
        }

        var aIbox=document.getElementsByTagName('div');
        var k = 0;

        for(var i=0; i<aIbox.length; i++){
                if(i!=0 && i%10 == 0){
                   k++;
                }
                aIbox[i].style.left =10 + 110*(i%10) + 'px';
                aIbox[i].style.top = 10 + 110*k + 'px';            
        }
    }
    )()

2014-11-19 14:43  回复本帖
tuoyuan
 (function(){
        

        for(var i=0; i<30; i++){
            document.body.innerHTML+='<div class="ibox">'+(i+1)+'</div>';
        }

        var aIbox=document.getElementsByTagName('div');
        var k = 0;

        for(var i=0; i<aIbox.length; i++){
                if(i!=0 && i%10 == 0){
                   k++;
                }
                aIbox[i].style.left =10 + 110*(i % 10) + 'px';
                aIbox[i].style.top = 10 + 110*k + 'px';            
        }
    }
    )()这个比较代码简洁,希望对楼主有帮助!
2014-11-19 14:44  回复本帖
董董
恩恩,谢谢了{:soso_e100:}
2014-11-19 15:36  回复本帖
jarver
    <script>
    window.err==function(){

    (function(){
        

        for(var i=0; i<30; i++){
            document.body.innerHTML+='<div class="ibox">'+(i+1)+'</div>';
        }

        var aIbox=document.getElementsByTagName('div');
        
        var offsetHeight=0;
        for(var i=0; i<aIbox.length; i++){
            offsetHeight=parseInt(i/10);
            aIbox[i].style.left=10+i%10*110+'px';
            aIbox[i].style.top=offsetHeight*110+'px';
        }

    })()

    };
    </script>
2014-11-21 10:55  回复本帖
jarver
在你原来的基础上修改的
2014-11-21 10:56  回复本帖
登录 后才可以发表回复