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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
一款基于css3和jquery实现的动画显示弹出层按钮教程
Jan 04 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
Nov 16 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
Sep 20 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
h5封装下拉刷新
Aug 25 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
单点登录 Ucenter示例分析
2013/10/29 PHP
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
Yii多表联合查询操作详解
2016/06/02 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
JavaScript之underscore_动力节点Java学院整理
2017/07/03 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
layer.close()关闭进度条和Iframe窗的方法
2018/08/17 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
Python中正则表达式详解
2017/05/17 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Pandas对DataFrame单列/多列进行运算(map, apply, transform, agg)
2020/06/14 Python
python安装mysql的依赖包mysql-python操作
2021/01/01 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
亲戚结婚的请假条
2014/02/11 职场文书
《故乡》教学反思
2014/04/10 职场文书
党的群众路线教育实践活动通讯稿
2014/09/10 职场文书
党支部反对四风思想汇报
2014/10/10 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
新员工试用期自我评价
2015/03/10 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
JavaScript canvas实现流星特效
2021/05/20 Javascript