基于jquery的不规则矩形的排列实现代码


Posted in Javascript onApril 16, 2012

这个东西让我想起了俄罗斯方块,这个实现起来很简单,容器里面所有的块元素用绝对定位排列,如果能放的下就放在这里,如果放不下了,在队列中找到能放得下的元素放置,
实在找不到,则换行排列下一行,具体思路是这样。代码里有详细的注释直接看代码吧。
下面是一个demo:
http://demo.3water.com/js/2012/sortRect/
代码打包下载 sortRect.rar

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>不规则宽高排列</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"> 
</script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"> 
</script> 
<style type="text/css"> 
.box { 
position: absolute; 
width: 100px; 
height: 100px; 
border: 1px solid #ffffff; 
display: none; 
background: url(img/1.jpg); 
/*margin-left: 4px; 
margin-top: 4px;*/ 
} 
.box2 { 
position: absolute; 
width: 100px; 
height: 202px; 
border: 1px solid #ffffff; 
display: none; 
background: url(img/2.jpg); 
/*margin-left: 4px; 
margin-top: 4px;*/ 
} 
.box3 { 
position: absolute; 
width: 202px; 
height: 100px; 
border: 1px solid #ffffff; 
display: none; 
background: url(img/3.jpg); 
/*margin-left: 4px; 
margin-top: 4px;*/ 
} 
.box4 { 
position: absolute; 
width: 202px; 
height: 202px; 
border: 1px solid red; 
background: url(img/4.jpg); 
display: none; 
} 
</style> 
</head> 
<body> 
<!-- 排列好下面20个方块 --> 
<div id="pannel" style=" position:relative; width:1500px; height:800px; border:1px solid red; overflow:hidden;"> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box3"> 
</div> 
<div class="box"> 
</div> 
<div class="box3"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box4"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box3"> 
</div> 
<div class="box"> 
</div> 
<div class="box4"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box3"> 
</div> 
<div class="box"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box4"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box4"> 
</div> 
<div class="box"> 
</div> 
<div class="box3"> 
</div> 
<div class="box"> 
</div> 
<div class="box4"> 
</div> 
<div class="box"> 
</div> 
<div class="box3"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
<div class="box3"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box2"> 
</div> 
<div class="box"> 
</div> 
<div class="box4"> 
</div> 
<div class="box"> 
</div> 
<div class="box"> 
</div> 
</div> 
<div id="con"> 
</div> 
<script type="text/javascript"> 
//初始化矩阵 
var initMatrix = function(x, y){ 
if (!x || !y) { 
return; 
} 
x = ~ ~ x; 
y = ~ ~ y; 
var mt = []; 
var i = 0; 
var getX = function(xl){ 
var i = 0; 
var matrixX = []; 
for (; i < xl; i++) { 
matrixX[i] = 0; 
} 
return { 
mt: matrixX, 
isComplete: false, 
spaces: [{ 
index: 0, 
len: matrixX.length 
}] 
}; 
} 
for (; i < y; i++) { 
mt[i] = getX(x); 
} 
return mt; 
} 
//生成元素相应的队列 
var getQuene = function(eleColl, base){ 
if (!eleColl) { 
return; 
} 
var quene = []; 
var i = 0; 
var len = eleColl.length; 
var getEleMatrix = function(ele, base){ 
var ht = ele.outerHeight() / base.height; 
var wt = ele.outerWidth() / base.width; 
return { 
ele: ele, 
ht: ht, 
wt: wt 
} 
} 
for (; i < len; i++) { 
quene[i] = getEleMatrix($(eleColl[i]), base); 
} 
return quene; 
} 
//以行为单位扫描矩阵 
var sortEveryEle = function(pannelMatrix, sortQuene, unitEle, callback){ 
if (!pannelMatrix || !sortQuene) { 
return; 
} 
unitEle = unitEle || 
{ 
width: 0, 
height: 0 
}; 
var checkSpace = function(line){ 
var i = 0; 
var len = line.mt.length; 
var tmpWt = 0; 
var tmpidx = 0; 
var tmpQuene = []; 
var isSetIdx = false; 
for (; i < len; i++) { 
if (line.mt[i] == 0) { 
if (!isSetIdx) { 
tmpidx = i; 
isSetIdx = true; 
} 
tmpWt++; 
} 
if ((line.mt[i] == 1) || (i == len - 1)) { 
//保存space信息到里面队列 
if (tmpWt > 0) { 
tmpQuene.push({ 
index: tmpidx, 
len: tmpWt 
}); 
} 
//清空临时信息 
tmpidx = 0; 
tmpWt = 0; 
} 
} 
if (tmpQuene.length <= 0) { 
line.isComplete = true; 
} 
line.spaces = tmpQuene; 
return; 
} 
var updateMartix = function(curLine, mt, ele, spidx, lineNum){ 
var i = j = 0; 
//获取当前空白信息 
var sp = curLine.spaces[spidx]; 
//如果占用多行则更新所有占用行的空间 
if (ele.ht > 1) { 
j = 0; 
for (; j < ele.ht; j++) { 
i = 0; 
for (; i < ele.wt; i++) { 
mt[lineNum + j].mt[sp.index + i] = 1; 
} 
//更新空白空间 
checkSpace(mt[lineNum + j]); 
} 
} 
else {//如果是单行的话只要更新第一个本行 
for (; i < ele.wt; i++) { 
curLine.mt[sp.index + i] = 1; 
} 
//更新模块 
checkSpace(curLine); 
} 
}; 
//获取合适的元素 
var getRightEle = function(stQu, wd){ 
var i = 0; 
var len = stQu.length; 
for (; i < len; i++) { 
if (stQu[i].wt <= wd) { 
return stQu.splice(i, 1); 
} 
} 
return; 
} 
//扫描单行 
var scanLine = function(oneLine, sortQuene, mt, lineNum){ 
var i = 0; 
var len = oneLine.spaces.length; 
//填充 
var theWt = oneLine.spaces[i].len; 
var mtLeft = mtTop = 0; 
//判断能容纳的宽是多少 
var rtEle = getRightEle(sortQuene, theWt); 
if (rtEle) { 
//放置元素 
//rtEle[0].ele.css("left", oneLine.spaces[i].index * 102);//base width 
//rtEle[0].ele.css("top", lineNum * 102);//base height; 
mtLeft = oneLine.spaces[i].index * (unitEle.width || 0); 
mtTop = lineNum * (unitEle.height || 0); 
if (callback) { 
callback({ 
left: mtLeft, 
top: mtTop, 
rect: rtEle[0] 
}); 
} 
//更新矩阵 
updateMartix(oneLine, mt, rtEle[0], i, lineNum); 
//返回位置队列 
return { 
left: mtLeft, 
top: mtTop, 
rect: rtEle[0] 
} 
} 
} 
var i = j = 0; 
var pmLen = pannelMatrix.length; 
var completeLine = 0; 
var thePosQuene = [], pos; 
for (; i < pmLen; i++) { 
while (!pannelMatrix[i].isComplete && (sortQuene.length > 0)) { 
pos = scanLine(pannelMatrix[i], sortQuene, pannelMatrix, i); 
if (pos) { 
thePosQuene.push(pos); 
} 
} 
} 
return thePosQuene; 
} 
var con = $("#con"); 
//生成相关的二维数组 
var baseWidth = 102; 
var baseHeight = 102; 
var base = { 
width: baseWidth, 
height: baseHeight 
} 
var pannel = $("#pannel"); 
var thePannelSize = { 
width: pannel.width(), 
height: pannel.height() 
}; 
var pannelMatrix = initMatrix(thePannelSize.width / baseWidth, thePannelSize.height / baseHeight); 
//得到要排序的不规则宽高的方块队列 
var sortQuene = getQuene(pannel.find("div"), base); 
//遍历matrix 
var theQu = sortEveryEle(pannelMatrix, sortQuene, base); 
var theQuOne = theQu.shift(); 
var selfCall = function(){ 
if (!theQuOne) { 
return; 
} 
var my = arguments.callee; 
theQuOne.rect.ele.show().animate({ 
left: "+" + theQuOne.left, 
top: "+" + theQuOne.top 
}, { 
duration: 1000, 
easing: "easeOutBounce", 
complete: function(){ 
theQuOne = theQu.shift(); 
my.call(); 
} 
}); 
} 
selfCall(); </script> 
</body> 
</html>
Javascript 相关文章推荐
写了一个layout,拖动条连贯,内容区可为iframe
Aug 19 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
Js的Array数组对象详解
Feb 22 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
node.js学习之断言assert的使用示例
Sep 28 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
react ant Design手动设置表单的值操作
Oct 31 Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 #Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 #Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 #Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 #Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 #Javascript
javascript针对DOM的应用分析(四)
Apr 15 #Javascript
javascript针对DOM的应用分析(三)
Apr 15 #Javascript
You might like
一个php导出oracle库的php代码
2009/04/20 PHP
php构造函数的继承方法
2015/02/09 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
2016/11/16 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
Vue实现菜单切换功能
2020/11/08 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
[45:06]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第二场 11.28
2020/12/02 DOTA
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
Python中作用域的深入讲解
2018/12/10 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
Linux的文件类型
2016/07/05 面试题
介绍一下Ruby的多线程处理
2013/02/01 面试题
班组长岗位职责
2014/03/03 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
后进生评语大全
2015/01/04 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
Golang二维切片初始化的实现
2021/04/08 Golang
解决Pytorch修改预训练模型时遇到key不匹配的情况
2021/06/05 Python
python unittest单元测试的步骤分析
2021/08/02 Python
MySQL数据库之存储过程 procedure
2022/06/16 MySQL