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的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3制作轮播图的一种方法
Nov 11 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
Feb 19 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 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根据IP地址获取所在城市具体实现
2013/11/27 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
AngularJS自定义指令实现面包屑功能完整实例
2017/05/17 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
2017/07/10 jQuery
pm2 部署 node的三种方法示例
2017/10/20 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
js实现AI五子棋人机大战
2020/05/28 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python函数参数类型*、**的区别
2015/04/11 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python编写朴素贝叶斯用于文本分类
2017/12/21 Python
Python数据可视化之画图
2019/01/15 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
德国最大的设计师鞋网上商店:Budapester
2017/12/07 全球购物
澳大利亚新奇小玩意网站:Yellow Octopus
2017/12/28 全球购物
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
九年级物理教学反思
2014/01/29 职场文书
企业职业病防治方案
2014/05/29 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
工作检讨书怎么写
2015/01/23 职场文书