九宫格布局

Posted wywd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了九宫格布局相关的知识,希望对你有一定的参考价值。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格布局</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #wrap{
            position: relative;
            width: 100%;
        }
        .box{
            background: #fd7600;
            width: 480px;
            height: 270px;
        }
    </style>
</head>
<body>
<button id="btn1">3列</button>
<button id="btn2">4列</button>
<button id="btn3">5列</button>
<div id="wrap">
   <div class="box">
       <img src="../images/a1.jpg" >
   </div>
   <div class="box">
       <img src="../images/a2.jpg" >
   </div>
   <div class="box">
       <img src="../images/a3.jpg" >
   </div>
   <div class="box">
       <img src="../images/a4.jpg" >
   </div>
   <div class="box">
       <img src="../images/a5.jpg" >
   </div>
   <div class="box">
       <img src="../images/a6.jpg" >
   </div>
   <div class="box">
       <img src="../images/a7.jpg" >
   </div>
   <div class="box">
       <img src="../images/a8.jpg" >
   </div>
   <div class="box">
       <img src="../images/a9.jpg" >
   </div>
   <div class="box">
       <img src="../images/a10.jpg" >
   </div>
   <div class="box">
       <img src="../images/a11.jpg" >
   </div>
   <div class="box">
       <img src="../images/a12.jpg" >
   </div>
</div>
<script src="../myTool.js"></script>
<script>
/*
  通过子元素数量和自定义列数来确定每个子元素的坐标
* 从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>

以上是关于九宫格布局的主要内容,如果未能解决你的问题,请参考以下文章

21 九宫格布局

九宫格布局

[RN] React Native 使用 FlatList 实现九宫格布局

九宫格自适应布局

小程序UI设计-布局分解-九宫格

九宫格布局