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

墨蓝 2022-10-06 05:54 201阅读 0赞

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

效果

![b303ec02f5239d754e5ede8fb8e1e65a.png][]

![e1816ce339da69a090dd5d2627c28343.png][]

![2e1f45b2ed873ce7ceff2bce0e77735c.png][]

代码如下：

\*\{

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列

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

![bg2.jpg][]

#### 以为遇见你 ####

世界才会变得美丽

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'));

\});

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

[b303ec02f5239d754e5ede8fb8e1e65a.png]: /images/20221005/ab30899ad3034e468e25855e20888970.png
[e1816ce339da69a090dd5d2627c28343.png]: /images/20221005/efac21539d2b4fdc9beb9dc14c261005.png
[2e1f45b2ed873ce7ceff2bce0e77735c.png]: /images/20221005/fc0a6455b19c4f9896e449bc3cdccdc7.png
[bg2.jpg]: