html 9宫格效果图,js实现九宫格布局效果

本文实例为大家分享了js实现九宫格布局效果的具体代码，供大家参考，具体内容如下

效果

代码如下：

*{

margin: 0;

padding: 0;

}

#container{

width: 1200px;

margin:0 auto;

}

#top{

padding: 20px;

}

#bottom{

position: relative;

}

.box{ //每一个小块

width: 220px;

height: 360px;

margin: 0 15px 15px 0;

background-color:#e8e8e8;

}

.box img{

width: 220px;

height: 300px;

}

.box p{

color: orangered;

}

3列

4列

5列

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

以为遇见你

世界才会变得美丽

window.οnlοad=function () {

//判断是否有id

function $(id) {

return typeof id ==='string'?document.getElementById(id):null;

}

//改变每个位置的函数 jiuge

function jiuge(lieshu,pn) {

var boxW=220,boxH=360,boxXY=15;

for(var i=0;i

var row =Math.floor(i/lieshu);//行

var col=Math.floor(i%lieshu);//列

console.log("当前盒子所在的坐标：("+row+","+col+")");

var sd=pn.children[i];

sd.style.position='absolute';

sd.style.left=col*(boxW+boxXY)+'px';

sd.style.top=row*(boxH+boxXY)+'px';

}

}

//调用

$('btn1').addEventListener('click',function () {

jiuge(3,$('bottom'));

});

$('btn2').addEventListener('click',function () {

jiuge(4,$('bottom'));

});

$('btn3').addEventListener('click',function () {

jiuge(5,$('bottom'));

});

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。