九宫格布局

有些网站图片展示都是几行几列排列，开发者可以用九宫格布局任意排列图片

<!DOCTYPE html>

<head>

<title>九宫格布局</title>

<style>

padding: 0;

margin: 0;

}

#wrap{

position: relative;

width: 100%;

}

.box{

background: #fd7600;

width: 480px;

height: 270px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

通过子元素数量和自定义列数来确定每个子元素的坐标

* 从rows:0行cols:0列开始，每一个格子（下标n从0开始(左标（rows,cols）)的距离上边距离

* top=（子盒子高度height）*rows+(边距y),左边的距离left=(子盒子width)*cols+(边距x)

* */

window.onload=function () {

let wrap=myTool.$("wrap")

myTool.$("btn1").onclick=function () {

j_flex(3,wrap)

}

myTool.$("btn2").onclick=function () {

j_flex(4,wrap)

}

myTool.$("btn3").onclick=function () {

j_flex(5,wrap)

}

function j_flex(allCols,parentNode) { //allCols自定义列数

let box=parentNode.children[0]

//获取子元素宽高

var boxw=box.offsetWidth

var boxh=box.offsetHeight

var marginxy=15

//遍历子元素

for(let i=0;i<parentNode.children.length;i++){

//求出当前盒子所在的行和列

let row=Math.floor(i/allCols)

let col=Math.floor(i%allCols)

//当前盒子的定位

let currentbox=parentNode.children[i]

currentbox.style.position="absolute"

currentbox.style.left=col*(boxw+marginxy)+"px"

currentbox.style.top=row*(boxh+marginxy)+"px"

}

</script>

</body>

</html>

posted @ 2020-06-17 23:16 岱宗如何阅读(240) 评论(0) 编辑收藏举报

刷新页面返回顶部

岱宗如何

九宫格布局

公告