HTML利用九宫格原理进行网页布局


Posted in HTML / CSS onMarch 13, 2020

前言

说到九宫格是不是想到了九宫格火锅那(O(∩_∩)O哈哈~)。其实九宫格布局在各大网站基本都有应用,当然这里的九宫格是泛指(O(∩_∩)O哈哈)。比如小米商城局部布局如下:

HTML利用九宫格原理进行网页布局
 

不难发现,一些电商平台的布局基本上大同小异,最普遍的还是这种九宫格布局。当然通过CSS也可以对其单独设置定位,但是数据量小还好说,如果数据量多起来,计算麻烦不说,还有可能影响布局。下面我们来说一下九宫格布局的原理。

原理(小白也能看懂)

HTML利用九宫格原理进行网页布局
 

上图是一个九宫格示意图,现在我们把它想象到一个网页中(想象不到就看上图图片~~),在网页中这个布局由最外层绿色的大的div标签包裹,在绿色的div标签中有许多蓝色的小的div标签作为绿色div标签的子级元素组成,这样简单的嵌套就完成了。由于我们的目标元素是蓝色的小div,那么我们无可避免的要对其设置盒子大小,以及外边距等等。但是我们操作的对象就是盒子的大小+外边距(也就是上图中红色框选的区域)。
 

具体流程如下:

我们先获取到蓝盒子以及其周围整体的大小,假设上图红框的大小是200px * 200px

这些盒子就要牵扯到绝对定位和相对定位:绿色的盒子是相对定位,里面的蓝盒子是绝对定位(即子绝父相)如果不明白那么请访问CSS定位子绝父相

我们想象把上面的九宫格放进 [3][3] 的二维数组中。此时第一个方框位于数组的 [0] [0] 位置,他的位置在绿色的div中就是(0×200px,0×200px),即top = 0px,left = 0px;其右面方框在二维数组的位置是 [0][1](0×200px,1×200px)即top = 0px;,left = 200px;其下面方框在二维数组的位置是 [1][0](1×200px,0×200px)即top = 200px,left = 0px。以此类推就可以都得到所有子级元素的位置了。

代码实现

先看效果截图
 

HTML利用九宫格原理进行网页布局
 

在我点击上方按钮时可以实现不同列数的展现。
以下是JS代码

 

window.onload = function () {
//    实现九宫格
    var btns  = $('.btnall button');//获取所有的按钮
    var photos = $('.photoall div.photo');//获取所有的子块
    //实现九宫格具体带参方法,allcols代表想要的列数。
    function Event(allcols){
        //盒子的宽长和外边距
        var w = 250, h = 390, margin = 10;
        for(var i = 0; i < photos.length; i++){
        	//方法的核心
            var row = parseInt(i / allcols);
            var col = parseInt(i % allcols);
            //具体位置的运行
            var top = row * (h + margin) + 'px';
            var left = col * (w + margin) + 'px';
            //设置位置
            photos[i].style.position = 'absolute';
            photos[i].style.left = left;
            photos[i].style.top = top;
        }
    }
    //为各个按钮设置监听事件
    btns[0].onclick = function (){
      	Event(3);
    };
    btns[1].onclick = function (){
        Event(4);
    };
    btns[2].onclick = function (){
        Event(5);
    };
}

到此这篇关于HTML利用九宫格原理进行网页布局的文章就介绍到这了,更多相关HTML九宫格布局内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
CSS3中的5个有趣的新技术
Apr 02 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 #HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 #HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 #HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 #HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 #HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 #HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 #HTML / CSS
You might like
php生成圆角图片的方法
2015/04/07 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Jquery通过ajax请求NodeJS返回json数据实例
2016/11/08 NodeJs
深入理解Javascript中的观察者模式
2017/02/20 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
python调用Delphi写的Dll代码示例
2017/12/05 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python 字符串池化的前提
2020/07/03 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
C#笔试题
2015/07/14 面试题
英语教师自荐信
2014/05/26 职场文书
邀请书格式范文
2015/02/02 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书