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将你的设计带入下个高度
Aug 08 HTML / CSS
CSS3悬停效果案例应用
Nov 21 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
关于css兼容性问题及一些常见问题汇总
May 03 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
通过css3的filter滤镜改变png图片的颜色的示例代码
May 06 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
Apr 23 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
详解盒子端CSS动画性能提升
May 24 HTML / CSS
CSS中实现动画效果-附案例
Feb 28 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/05/18 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
smarty实现多级分类的方法
2014/12/05 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
2017/09/02 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
CKeditor4 字体颜色功能配置方法教程
2019/06/26 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
python的变量与赋值详细分析
2017/11/08 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
Python while循环使用else语句代码实例
2020/02/07 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
python的help函数如何使用
2020/06/11 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
计算机个人求职信范例
2014/01/24 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
小学六一主持词开场白
2015/05/28 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书