Javascript特效：九宫格布局

知识点

九宫图算法思想

① 获取所有图片div的父标签，并对所有图片div进行遍历
② 坐标可以通过遍历确定
③ 利用绝对布局，left和top进行定位
Ⅰ. 利用控件的索引index计算出空间所在的行号和列号
Ⅱ. 利用列号计算出控件的left距离
Ⅲ. 例用行号计算出控件的top距离
底层封装函数，对上层调用帮助很大

运行效果

初始:

点击三列:

点击四列:

点击五列:

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding: 0}#container{width: 1200px;margin: 0 auto}#top{padding: 20px}#bottom{position: relative}.box{width: 220px;height: 360px;margin: 0 15px 15px 0;background-color: #e8e8e8;}.box>img{height:85%;width:100%}.box>h4{margin:3px 0}</style>
</head>
<body>
<div id="container"><div id="top"><button id="btn1">3列</button><button id="btn2">4列</button><button id="btn3">5列</button></div><div id="bottom"><div class="box"><img src="data:images/叶问.jpg" alt=""><h4>叶问</h4><p>HD1280高清中字版</p></div><div class="box"><img src="data:images/人狼游戏2：野兽阵营.jpg" alt=""><h4>人狼游戏2：野兽阵营</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/人狼游戏：疯狂大陆.jpg" alt=""><h4>人狼游戏：疯狂大陆</h4><p></p>BD1280高清中英双字版</div><div class="box"><img src="data:images/夏末.jpg"alt=""><h4>夏末</h4><p>HD1280高清中字版</p></div><div class="box"><img src="data:images/天使请吻我.jpg" alt=""><h4>天使请吻我</h4><p>HD1280高清中字版</p></div><div class="box"><img src="data:images/星球大战9：天行者崛起.jpg" alt=""><h4>星球大战9：天行者崛起</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/杀死萨拉查.jpg" alt=""><h4>杀死萨拉查</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/死亡山地.jpg" alt=""><h4>死亡山地</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/网中蜘蛛.jpg" alt=""><h4>网中蜘蛛</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/误杀.jpg" alt=""><h4>误杀</h4><p>HD1280高清中字版</p></div><div class="box"><img src="data:images/速度与激情：特别行动.jpg" alt=""><h4>速度与激情：特别行动</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/荣耀与幻想.jpg" alt=""><h4>荣耀与幻想</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/猫腻少女.jpg" alt=""><h4>猫腻少女</h4>HD1280高清中字版</div><div class="box"><img src="data:images/变焦.jpg" alt=""><h4>变焦</h4><p>BD1280高清中英双字版</p></div><div class="box"><img src="data:images/印巴冤狱.jpg" alt=""><h4>印巴冤狱</h4><p>BD1280高清中英双字版</p></div></div>
</div>
<script>window.onload = function (ev) {$('btn1').addEventListener('click',function (ev1) {j_flex(3,$('bottom'));});$('btn2').addEventListener('click',function (ev1) {j_flex(4,$('bottom'));});$('btn3').addEventListener('click',function (ev1) {j_flex(5,$('bottom'));});};/*** n宫格布局* @param {number}allCols* @param {object}parentNode*/function j_flex(allCols, parentNode) {// 1. 定义变量var boxWidth = 220, boxHeight = 360, marginXY = 15;// 2. 便利for (var i = 0; i < parentNode.children.length; i++) {// 2.1 求出当前盒子所在行和列var row = Math.floor(i / allCols);var col = Math.floor(i % allCols);// 2.2 盒子定位var currentBox = parentNode.children[i];currentBox.style.position = 'absolute';currentBox.style.left = col * (boxWidth + marginXY) + 'px';currentBox.style.top = row * (boxHeight + marginXY) + 'px';}}/*** 根据id获取元素节点* @param {string}id* @returns {any}*/function $(id){return typeof id === 'string' ? document.getElementById(id) : null;}
</script>
</body>
</html>

Javascript特效：九宫格布局相关推荐

特效html布局,一些好玩的css特效
html5 css3有哪些新特效 html5: 用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素,比如 article.f ...
11种控制内容展示的JavaScript特效和技巧
交付信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容. 不管你想要介绍的是什么样的内容,你都可以以更加互动和更加适应的方式去呈现现它.本文里面,我们为你收 ...
首页图标九宫格 html5,html5九宫格布局的网格菜单代码
特效描述:html5 九宫格布局网格菜单代码.今天我们想和大家分享一个九宫格菜单动画.这个想法的灵感来自于视频中的效果,html5全屏展开网格布局菜单,点击全屏背景切换显示代码. 代码结构 1. 引 ...
java script特效_通过JavaScript特效控制内容展示的11种方法
通过JavaScript特效控制内容展示的11种方法交互信息结构是一个交互式用户界面所需要完成的首要任务.更直观的布局结构设计,能使用户更好的理解内容.以下是百分网小编搜索整理的通过JavaScri ...
前程无忧招聘网站特效制作(JavaScript特效)
招聘网站特效制作,实现如下功能: 1.网站首页 2.新用户注册 3.用户登录 4.简历管理:信息填写 5.职位搜索 6.招聘公司页面查看模板制作:网站底部做成模板,网站其他页面调用模板,模板用DIV ...
【冰极峰教程系列之二】：牢不可破的九宫格布局
原创:冰极峰转载请注明出处时间:2009年6月22日 8:40:16 冰极峰教程系列之一:九宫格基本布局冰极峰教程系列之二:牢不可破的九宫格布局冰极峰教程系列之三:三层分离的完美九宫格冰极峰 ...
Moo.fx 超级轻量级的 javascript 特效库
Moo.fx是一个超级轻量级的 javascript 特效库(7k),能够与 prototype.js 或mootools 框架一起使用.它非常快.易于使用.跨浏览器.符合标准,提供控制和修改任何 ...
iOS回顾笔记（ 02 ） -- 由九宫格布局引发的一系列“惨案”
iOS回顾笔记( 02 ) -- 由九宫格布局引发的一系列"惨案" 前言(扯几句淡先) 回顾到学习UI过程中的九宫格布局时,发现当时学的东西真是不少. 这个阶段最大的特点就是:知识 ...
[html] 实现九宫格布局
[html] 实现九宫格布局 <style>.container::after{content: "";display: block;clear: both;}.box ...
recycleview 使用详解，添加头部尾部，混合item，侧滑菜单，跳转到指定位置，实现九宫格布局
添加头部尾部,混合item:https://blog.csdn.net/meixi_android/article/details/82256319 侧滑菜单:https://blog.csdn.ne ...

Javascript特效：九宫格布局

知识点

运行效果

代码

Javascript特效：九宫格布局相关推荐

最新文章

热门文章