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地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
CSS3中background-clip和background-origin的区别示例介绍
Mar 10 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
CSS3 @media的基本用法总结
Sep 10 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
html5之Canvas路径绘图、坐标变换应用实例
Dec 26 HTML / CSS
HTML5进度条特效
Dec 18 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 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三层结构(上) 简单三层结构
2010/07/04 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
Smarty模板变量调节器用法分析
2016/05/23 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
apache集成php7.3.5的详细步骤
2019/06/20 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
浅谈angular4 ng-content 中隐藏的内容
2017/08/18 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
聊聊JS动画库 Velocity.js的使用
2018/03/13 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python装饰器的函数式编程详解
2015/02/27 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
PHP面试题及答案二
2015/05/23 面试题
酒店管理毕业生自我鉴定
2014/03/02 职场文书
英文自荐信常用句子
2014/03/26 职场文书
小学生读书活动总结
2014/06/30 职场文书
超市促销活动总结
2014/07/01 职场文书
员工培训协议书
2014/09/15 职场文书
公司财务部岗位职责
2015/04/14 职场文书
车位出租协议书范本
2016/03/19 职场文书