js用循环添加精灵图的坐标

用循环添加精灵图的坐标

完成效果：

css样式代码：

<style>
        ul {
            width: 180px;
        }

        li {
            list-style: none;
            width: 24px;
            height: 24px;
            margin: 10px;
            background: url("images/sprite.png") no-repeat;
            /* background-color: black; */
            float: left;
        }
    </style>

html和js代码

<div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <!-- 要怎么排列成成4*3的？ -->
            <!-- 让它浮动 -->
            <!-- 然后限制ul的宽度，li自然就会挤下去了 -->

        </ul>
    </div>
    <script>
        //用循环来给li添加精灵图的位置坐标
        //获取元素
        var lis = document.querySelectorAll('li');
        //绑定事件，执行程序
        for (var i = 0; i < lis.length; i++) {
            var index = 44 * i;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        } 
    </script>
</body>