自适应自动排列html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应排列</title>
    <style type="text/css"> 
*{ padding:0; margin:0;}
.box{ width:100%; height: auto; position:relative; margin: 0 auto }
.box div{ width: 100px; height: 100px; position:absolute; background-color:#000;}
    </style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
    $(function(){

        var iWidth=$(".box div").width();
        var iHeight=$(".box div").height();
        var iJG=10;
        var MaxWidth=iWidth+iJG;
        var iCell=0;
        var arrL=[];
        var arrT=[];
        setCell()
        function setCell(){
            iCell=Math.floor($(window).width()/MaxWidth);
            $(".box").width(iCell*MaxWidth-10)
            document.title=iCell


        }
            
        
        SetPos()
        function SetPos(){

                for (var i = 0; i < iCell; i++) {
            arrT.push(0);
            arrL.push(i*MaxWidth);
            
        };
                $(".box div").each(function(){
                    $(this).animate({
                        left:arrL[getMin()],
                        top:arrT[getMin()]
                    })
                    arrT[getMin()]+=iHeight+10




                })
        }
        $(window).resize(function(){
            var Ncell=iCell;
            setCell()
            arrL=[];
            arrT=[];
            
            if ( Ncell==iCell) {
                return
            };
            SetPos()
            

            
            
        })




        function getMin(){
        Now=arrT[0];
        var index=0
        for (var i = 1; i < arrT.length; i++) {
            if (arrT[i]<Now) {
                Now=arrT[i]
                index=i

            };
        };

        return index;

        }















    })


    </script>
</head>


<body>
    <div class="box">
        
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
    
</body>
</html>
自适应自动排列html
自适应自动排列html

推荐阅读
