文章目录
九宫格布局描述
在浏览器中有n张图片（我这里是是十一张图片），其顶部有三个button(内容分别是三列、四列、五列)，点击任何一个按钮，图片将会以该列的形式展现在浏览器上
效果展示
页面加载完
点击【三列按钮】
点击其他按钮，效果类似。这里就不一一展示了
算法思想（以三列为例）
原理
在这里假设第一行的行下表为0，第一列的列下标为0，依此类推（可以看成数组），而每一个图片所占的盒子（以下都称图片子盒子，图片子盒子的宽度和高度都一样）都一个行下表和列下标。（如下图所示，图示自己个儿画的，丑别介意哈）
算法
（1）对每一个图片子元素从零开始编号（如下图所示），会发现每张图片的行下表=编号/列，列下标=编号%列（这里的列=3）（这里以编号为4的图片子元素为例）
（2）图片子元素是相对于父元素定位的，那么父元素要设置position：relative;
图片子元素要设置position:absolute (子绝父相)
（3）考虑每一个图片子元素上、左相对于父元素定位的距离。（还是以编号为4的图片子元素为例），该图片子元素相对与父元素左边有一个其本身宽度的距离，相对与父元素上边有一个其本身高度的距离（因为所有图片子元素高度宽度相同），发现这个距离的倍数刚好是其行列下标，即 x = row * width , y = col * height (x,y 分别为左、上距离；row为行下标，col为列下标；width 为宽度， height为高度)
HTML代码
每一张图片下面有描述（例如：我是第N张图片），每张图片和其描述放在一个盒子中
<body>
<div id="container">
<div id="top">
<button id="btn1">三列</button>
<button id="btn2">四列</button>
<button id="btn3">五列</button>
</div>
<div id="bottom">
<div class="box">
<img src="./program1/images/2.png" alt="">
<h4>我是第一张图</h4>
</div>
<div class="box">
<img src="./program1/images/3.png" alt="">
<h4>我是第二张图</h4>
</div>
<div class="box">
<img src="./program1/images/1.jpg" alt="">
<h4>我是第三张图</h4>
</div>
<div class="box">
<img src="./program1/images/4.jpg" alt="">
<h4>我是第四张图</h4>
</div>
<div class="box">
<img src="./program1/images/2.png" alt="">
<h4>我是第五张图</h4>
</div>
<div class="box">
<img src="./program1/images/3.png" alt="">
<h4>我是第六张图</h4>
</div>
<div class="box">
<img src="./program1/images/1.jpg" alt="">
<h4>我是第七张图</h4>
</div>
<div class="box">
<img src="./program1/images/4.jpg" alt="">
<h4>我是第八张图</h4>
</div>
<div class="box">
<img src="./program1/images/2.png" alt="">
<h4>我是第九张图</h4>
</div>
<div class="box">
<img src="./program1/images/3.png" alt="">
<h4>我是第十张图</h4>
</div>
<div class="box">
<img src="./program1/images/2.png" alt="">
<h4>我是第十一张图</h4>
</div>
</div>
</div>
</body>
CSS样式
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
width: 200px;
}
#container {
width: 1200px;
margin: 0 auto;
}
#top {
padding: 20px;
}
#bottom {
position: relative; //父元素相对定位
}
#container .box {
width: 200px;
height: 250px;
margin: 0 15px 15px;
background-color: #e8e8e8;
}
</style>
JS实现代码
<script>
window.onload = function () {
//监听各个按钮点击事件 调用九宫格布局算法函数
$('btn1').addEventListener('click',function (){
j_flex(3 , $('bottom'));
});
$('btn2').addEventListener('click',function (){
j_flex(4 , $('bottom'));
});
$('btn3').addEventListener('click',function (){
j_flex(5 , $('bottom'));
});
};
//九宫格布局 相对于父元素定位
function j_flex(allCos , parentNode) {
//定义变量
var boxW = 200, boxH = 250,marginXY = 15;
//遍历
for (let index = 0; index < parentNode.children.length; index++) {
// console.log(parentNode.children);
//求出当前所在盒子所在的列和行
let row = Math.floor(index/allCos);
let col = Math.floor(index%allCos);
//盒子定位
let currentBox = parentNode.children[index];
currentBox.style.position = 'absolute';
currentBox.style.left = col * (boxW + marginXY) +'px';
currentBox.style.top = row * (boxH + marginXY) +'px';
}
};
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : null;
}
</script>
JS详解-----封装
这里定义一个封装函数，传入id，若id为字符串，则返回获取该id的元素，否则返回null
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : null;
}
JS详解----九宫格算法实现函数
（1）首先要定义变量分别表示图片子元素的宽度、高度和margin（如代码中定义变量）
（2）遍历传过来的父元素的每一个子元素，求出当前所在盒子所在的列和行，并是指该盒子的position:absolute;，进行盒子定位。
（3）设置当前图片子元素的 left和 top值
function j_flex(allCos , parentNode) {
//定义变量
var boxW = 200, boxH = 250,marginXY = 15;
//遍历
for (let index = 0; index < parentNode.children.length; index++) {
// console.log(parentNode.children);
//求出当前所在盒子所在的列和行
let row = Math.floor(index/allCos);
let col = Math.floor(index%allCos);
//盒子定位
let currentBox = parentNode.children[index];
currentBox.style.position = 'absolute';
currentBox.style.left = col * (boxW + marginXY) +'px';
currentBox.style.top = row * (boxH + marginXY) +'px';
}
};
如果觉得还不错就点个赞叭
算是给小白的一个鼓励啦
