dom基础之九宫格运用

原理:要做到九宫格效果必须知道当前盒子几行几列 当前盒子的left=列*(盒子的宽度+边边框)

top=行*(盒子的高度+边框)

           当前盒子的坐标row=i(当前盒子的下标)/allCols(总列数) 注意要parseInt

           当前盒子的坐标col=i(当前盒子的下标)%allCols(总列数) 注意要parseInt

   实现代码如下 封装的时候记得传入两个参数 总列数和当前要排列的盒子的id

div+html


dom基础之九宫格运用_第1张图片

css

dom基础之九宫格运用_第2张图片

js封装

dom基础之九宫格运用_第3张图片

你可能感兴趣的:(dom基础之九宫格运用)