JS实现九宫格自定义功能

JS代码段

算法分析

根据九宫格盒子的行数和列数，解决盒子内部的定位问题

实际功能：自定义页面显示几行几列

口诀：
1，利用控件的索引index计算出控件所在的行号和列号
2，利用列好计算出控件的left距离
3，利用行号计算出控件的top距离

<script>
            window.onload = function () {
            //    1.获取标签
                var btns = document.getElementById("top").children;
                var bottom = document.getElementById("bottom");
            //    2.监听按钮点击
                btns[0].onclick = function () {
                    //    2.1定义变量
                    j_flex(3, bottom);
                };
                btns[1].onclick = function () {
                    //    2.1定义变量
                    j_flex(4, bottom);
                };
                btns[2].onclick = function () {
                    //    2.1定义变量
                    j_flex(5, bottom);
                };


                    function j_flex(allCols, parentNode) {
                            var boxW = 220 , boxH = 360, marginXY = 15;

                            //    2.2 遍历
                            for(var i=0; i < parentNode.children.length; i++){
                                //    2.2.1 求出当前盒子所在的行和列
                                var row = parseInt(i / allCols);
                                var col = parseInt(i % allCols);

                                console.log("当前盒子在第"+row+",第"+col);

                                //    2.2.2 盒子定位3列
                                var currentBox = parentNode.children[i];
                                currentBox.style.position = 'absolute';
                                currentBox.style.left = col * (boxW + marginXY)+'px';
                                currentBox.style.top = row * (boxH + marginXY)+'px';

                            };

                    }
                }

        </script>