首页 > js教程 > 正文

JS快速生成各种网格布局工具Grid介绍

原创 2018-01-13 0 240
这两天了解了一下css的grid布局,发现确实很好用。看了几篇博客,了解了它的几个常用属性后,可以快速生成一个网格布局。相较于传统的float、定位等显得更成体系,更规范,不Grid.js是一个使用JavaScript动态创建规则网格布局、非规则网格布局的模块。FE可以通过new Grird(option)创建一个Grid实例, 该实例的UI就呈现为css grid布局。需要一些hack做法。

虽然grid布局已经很好,前端工程师中有一些更多是喜欢通过动态创建p,使用js给p加样式这种方式来完成自己的工作的。

同样是出于使用JavaScript动态生成grid布局的需要,诞生了Grid.js这个小工具。

效果图

先来几张使用Grid.js生成的效果图吧。
以下四张效果图父容器的大小都是600*600像素。

第一张是一个4X4的网格,其中有3个网格是非原子大小(1X1)的,即2X2, 2X2, 2X1。

第二张是一个5X5的规则网格,所谓规则网格就是所有子元素都是1X1的大小。

第三张是一个6X5的网格,其中有5个非原子大小的网格。

第四张是一个7X7的网格,其中有4个非原子大小的网格。

Grid.js使用

Grid.js使用es6 class语法完成,所以使用方式很简单。
通过new Grid(option)即可生成一个网格实例。就以效果图第二张图生成的5X5网格来说,它的代码就是:

let grid = new Grid({
container:document.getElementsByClassName('grid')[0],// 必须项
colCount:5,
rowCount:5,
width:600,
height:600,
});

如果你想给每个网格设置不同的样式,就是用对外API方法setGridStyleByIndex(); 同样拿效果图5X5网格来说,那五个对角线上网格就做了背景的样式设置,它们是通过如下代码完成的:

grid.setGridStyleByIndex(0, {"background": "red"});
grid.setGridStyleByIndex(6, {"background": "green"});
grid.setGridStyleByIndex(12, {"background": "yellow"});
grid.setGridStyleByIndex(18, {"background": "blue"});
grid.setGridStyleByIndex(24, {"background": "orange"});

还有一个问题是怎么拿每个子元素(小格子)的引用?通过对外API方法 getGrid(n)
还有一个问题是怎么拿所有子元素(小格子)的引用?通过对外API方法 getGrids()

let grids = grid.getGrids();
for(let i = 0; i < grids.length; i++){
grids[i].innerHTML = i + 1;
}

上面这段代码就是拿了所有小网格的引用,然后给网格填充文本内容的。示例中每个小格子的文本内容就是每个小格子在p列表中的索引+1。

Grid.js API

考虑到最核心的需求有两点,一个是较为简单地(至少和直接使用css同样方便)生成网格布局,第二是生成网格布局后拿到每个格子的引用,给格子添加内容。所以主要说这两方面。

传参生成网格实例

怎么生成不同的、规则的、不规则的网格实例,主要看new Grid(option)的时候你传的参数,提供可传的参数包括以下。

名称类型简介
containerhtmlDomElement父容器,必须项
rowCountnumber网格行数
colCountnumber网格列数
widthnumber、%父容器宽度
heightnumber、%父容器高度
pCountnumber实际格子的多少
gridAreaArray那些非1X1格子的占位表示

关于pCount和gridArea数组的说明
这两个参数用来生成不规则网格布局,所以是本模块的关键。否则,你就只能用本模块生成n*m的规则网格了。

我们拿第一张效果图4X4网格举例,本来如果不是1、2、3那三个网格有跨行、跨列的行为,就不需要传pCount,也不用传gridArea,模块会为你生成4X4=16个一模一样的格子。但是由于这三个较大网格存在,所以,这个父容器是容不下16个子元素的,所以,你传的pCount是什么呢,是在存在非1X1子网格的情况下,父容器正好填满时,子网格的数量,因此就是9.。一般在你拿到设计图的时候,你就知道这个布局了,子网格数目很好算(因为实际场景也不需要创建好几十乘以好几十那么琐碎的格子)。

针对这三个非1X1的子网格,我们需要为其每一个传一个数组,来表示这个子网格是在父网格的第几行开始、第几列开始、跨几行、跨几列。即每个非1X1的子网格,都要传一个length为4的数组。然后把这些数组再放到一个外包数组里面,这个外包数组就是gridArea。

对于效果图1,gridArea = [[1,1,2,2],[2,3,2,2],[4,1,1,2]]。
整个4X4网格共有3个非1X1大小的子网格。
其中[1,1,2,2]就说明这个4X4的网格中有一个从第一行第一列开始,跨行跨列都为2的子网格。

API接口

目前暴露的API

名称参数类型简介
setGridStyleByIndex(n,style)number,obj设置小格子样式,第一个参数是小格子索引;style是对象,举例style={"color":"red"}
getGrids()获取所有子网格p引用
getGrid(n)number获取某个子网格

相关推荐:

CSS网格布局的示例代码

详解jQuery移动页面开发中的ui-grid网格布局使用_jquery

Grid布局方式的实例详解

以上就是JS快速生成各种网格布局工具Grid介绍的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript 布局 网格
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5快速开发企业站点[全程实录]更新中...

    本课以最新版ThinkPHP5.0.10为基础进行开发,全程实录一个完整企业点,从后台到前台,从控制器到路由的全套完整教程,不论是你是新人,还是有一定开发经验的程序员,都可以从中学到实用的知识~~

    Thinkphp3.2.3个人博客开发

    ThinkPHP是一个快速、开源的轻量级国产PHP开发框架,是业内最流行的PHP框架之一。本课程以博客系统为例,讲述如何使用TP实战开发,从中学习Thinkphp的实践应用。模版下载地址:http:/...

    PHP实战天龙八部之仿爱奇艺电影网站

    本课程是php实战开发课程,以爱奇艺电影网站为蓝本从零开发一个自己的网站。目的是让大家了解真实项目的架构及开发过程

    独孤九贱(8)_php从零开始开发属于自己的php框架

    本课以一个极简的PHP开发框架为案例,向您展示了一个PHP框架应该具有的基本功能,以及具体的实现方法,让您快速对PHP开发框架的底层实现有一个清楚的认识,为以后学习其实的开发框架打下坚实的基础。

    独孤九贱(3)_JavaScript视频教程

    javascript是运行在浏览器上的脚本语言,连续多年,被评为全球最受欢迎的编程语言。是前端开发必备三大法器中,最具杀伤力。如果前端开发是降龙十八掌,好么javascript就是第18掌:亢龙有悔。...

    直播实录:PHP魔鬼训练营[从零开始制作个人博客]

    本站9月直播课已经结束,本套教程是直播实录,没有报上名或者漏听学员福利来了,赶紧看看吧,说不定这里就有你的菜

    2018前端入门_HTML5

    轻松明快,简洁生动,让你快速走入HTML5的世界,体会语义化开发的魅力

    JavaScript极速入门_玉女心经系列

    JavaScript能够称得上是史上使用最广泛的编程语言,也是前端开发必须掌握的三技能之一:描述网页内容的HTML、描述网页样式的CSS以及描述网页行为的JavaScript。本章节将帮助大家迅速掌握...

    PHP用户注册登录系统视频教程

    《php用户注册登录系统》主要介绍网站的登录注册功能,我们会从最简单的实现登录注册功能开始,增加验证码,cookie验证等,丰富网站的登录注册功能

    独孤九贱(7)_Bootstrap视频教程

    Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计,它让前端开发更快速、简单,所有开发者都能快速上手...

    PHP学生管理系统视频教程

    《PHP学生管理系统视频教程》主要给大家讲解了HTML,PHP,MySQL之间的相互协作,实现动态的网页显示和获取数据.

    独孤九贱(2)_CSS视频教程

    《php.cn独孤九贱(2)-css视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了CSS知识...

    弹指间学会HTML视频教程

    《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础

    独孤九贱(6)_jQuery视频教程

    jQuery是一个快速、简洁的JavaScript框架。设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的...

    最新微信小程序开发视频教程

    《最新微信小程序开发视频教程》本节课程是由微趋道录制,讲述了如何申请一个微信小程序,以及开发中需要使用哪些工具,和需要注意哪些等。

    • 小云云

      学生

    • 想不好签名了...
    • 5865篇
      文章总数
    • 240
      文章总浏览数

    头条

    推荐视频教程

  • javascript初级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 最新更新