xylw
- 浏览: 57675 次
- 性别:
- 来自: 南宁
-
文章分类
最新评论
不规则矩形的排列
<!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>
分享到：
发表评论
相关推荐
现在很多网站都用不规则矩形来罗列图片，ipad上面很多应该用也都是用的不规则的矩形，但是还要让他们各自都靠近排列，不能有空隙
主要内容：1）ball create和ball generate命令用法介绍；2）规则排列生成颗粒，矩形排列和六边形排列；3）不规则随机生成颗粒，半径扩大法（可按级配生成），颗粒排斥法等。
在屏幕上绘出辅助线，图标就会沿辅助线排列:-) 绘辅助线的方法与Windows的画图工具相同，按住Shift键可以绘制规则辅助线。 <br>“撤销”和“重复”: 排列图标的过中，可点“撤销”按钮恢复上一次...
但实际雷电防护及检测工作中经常遇到因建筑物的不规则或者现场条件的限制而不得不使用三支甚至四支以不规则形状排列的不等高避雷针的情况，这时这个多支不等高避雷针保护范围的计算问题就成为一个难题，所以许多同志...
幻灯片模板封面，使用了不规则排列的矩形色块进行布局设计，右侧防止一张与工作汇报相关的图片进行点缀。左边填写工作汇报时间、地点、主题名称等。 PPT模板内容页面，使用彩色扁平化设计，包含了各种
而griddata函数的已知数据点（X，Y）不要求规则排列，特别是对试验中随机没有规律采取的数据进行插值具有很好的效果。griddata(X,Y,XI,YI,'v4') v4是一种插值算法，没有具体的名字，原文称为“MATLAB 4 griddata ...
这种方法对于像三角形这样边框数较少的图形还可以，如果图形的边框数较多，特别是一些不规则图形，这种方法就不实用了，必须用到下一种方法。 （2）选择选择工具 ，双击任意一条边框即可选取该图形的所有边框。选取...
2、在保证电气性能的前提下，元件应放置在栅格上且相互平行或垂直排列，以求整齐、美观，在一般情况下不允许元件重叠；元件排列要紧凑，元件在整个版面上应分布均匀、疏密一致。 3、电路板上不同组件相临焊盘图形...
元素的类型 元素的类型 01 元素的类型 ...块状元素（block） 内联元素（inline） 内联块状元素（inline-block） ...没有自己的形状，不能定义宽高，最小内容单元也呈现矩形形状； 遵循盒子模型基本规则。 描述 示例 <spa
PCB布局规则 1、在通常情况下，所有的元件均应布置在电路板的同一面上，只有顶层元件过密时，才能将一些高度有限并且发热量小的器件，如贴片电阻、贴片电容、贴片IC等放在底层。 2、在保证电气性能的前提下，...
2、在保证电气性能的前提下，元件应放置在栅格上且相互平行或垂直排列，以求整齐、美观，在一般情况下不允许元件重叠；元件排列要紧凑，元件在整个版面上应分布均匀、疏密一致。 3、电路板上不同组件相临焊盘图形...
% griddata - 不规则数据的二元函数插值 % *interp - 不单调节点插值 % *lagrange - 拉格朗日插值法 % % 方程求根 % inv - 逆矩阵 % roots - 多项式的根 % fzero - 一元函数零点 % fsolve - 非线性方程组 % solve - ...
1 《PCB检查表》内容包括设计规则,层定义、线宽、间距、焊盘、过孔设置,还要重点复查器件布局的合理性,电源、地线网络...4 电路板的最佳形状矩形,长宽比为3:2或4:3,位于电路板边缘的元器件,离电路板边缘一般不小于2mm.
其中花纹块和花纹槽的大小是辨识的核心，运用轮廓提取和种子填充算法等图像处理方法，将轮胎花纹由不规则的花纹块转化为矩形块，通过累加填充图案的像素值，统计出花纹块和槽的面积，并利用胎噪声仿真分析软件（TNS...
% griddata - 不规则数据的二元函数插值 % *interp - 不单调节点插值 % *lagrange - 拉格朗日插值法 % % 方程求根 % inv - 逆矩阵 % roots - 多项式的根 % fzero - 一元函数零点 % fsolve - 非线性方程组 % solve - ...
% griddata - 不规则数据的二元函数插值 % *interp - 不单调节点插值 % *lagrange - 拉格朗日插值法 % % 方程求根 % inv - 逆矩阵 % roots - 多项式的根 % fzero - 一元函数零点 % fsolve - 非线性方程组 % solve - ...