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 Backgrounds属性相关介绍
May 11 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
用CSS3实现瀑布流布局的示例代码
Nov 10 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5实现视频直播功能思路详解
Nov 16 HTML / CSS
5分钟弄清楚html5的drag and drop(小结)
Apr 10 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
简单PHP上传图片、删除图片实现代码
2010/05/12 PHP
php写的AES加密解密类分享
2014/06/20 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
简单谈谈php延迟静态绑定
2016/01/26 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
python使用opencv读取图片的实例
2017/08/17 Python
python实战教程之自动扫雷
2018/07/13 Python
python实现Flappy Bird源码
2018/12/24 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Django重设Admin密码过程解析
2020/02/10 Python
python判断变量是否为int、字符串、列表、元组、字典的方法详解
2020/02/13 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
HTML5注册页面示例代码
2014/03/27 HTML / CSS
Shopee新加坡:东南亚与台湾电商平台
2019/01/25 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
复核员上岗演讲稿
2014/01/05 职场文书
小学新学期教师寄语
2014/01/18 职场文书
文科生自我鉴定
2014/02/15 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
离婚案件被告代理词
2015/05/23 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android
JavaScript前端面试组合函数
2022/06/21 Javascript