xylw
- 浏览: 60117 次
- 性别:
- 来自: 南宁
-
文章分类
最新评论
不规则矩形的排列
<!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>
分享到：
发表评论
相关推荐
不规则矩形排列的实现依赖于CSS样式和JavaScript脚本的综合运用。首先，我们需要通过CSS为不同尺寸的不规则矩形定义样式。在这个案例中，我们使用了绝对定位来设置元素的尺寸和位置。通过设置position属性为absolute...
本文将深入探讨如何使用纯CSS技术创建不规则形状排列的菜单导航，这四种不同的风格可以为您的网站增添独特的视觉效果和用户体验。 1. **圆角矩形与多边形组合**： CSS3中的`border-radius`属性可以让我们轻松实现...
"容纳2*2不规则矩形的横向滚动容器"是一个设计概念，它旨在提供一个用户界面组件，该组件可以水平滚动显示四个不规则形状的矩形。这种容器对于展示数据、图像或者其他多媒体内容时，能提供更灵活的布局方式。 首先...
"不规则形状排列的css菜单导航"是一个创新的设计概念，通过CSS技术实现各种独特的菜单布局，为用户提供视觉吸引力的同时增强交互体验。下面将详细探讨这个主题中的核心知识点。 首先，CSS（Cascading Style Sheets...
在CSS3中，绘制不规则图形的方法逐渐变得多样化和实用化。这些技术使得网页设计师能够创造出更为复杂的视觉效果，从而提升用户体验。以下是一些主要的CSS3方法，用于创建不规则图形： 1. **shape-outside属性**：这...
在计算机图形学中，画线函数是至关重要的组成部分，它们用于在屏幕上绘制各种线条，而计算规则矩形（不平等于坐标轴的矩形）则是处理几何形状的基础操作。本篇将详细介绍四种画线函数——向量画线法、函数画线法、...
"不规则窗体"是指那些突破传统矩形边框，采用非标准形状的窗口，可以提升应用的独特性和视觉吸引力。这类窗体通常涉及到自定义绘图技术，使程序能够呈现出各种形状和样式。本知识点主要围绕如何实现"不规则悬浮图标...
在Android开发中，不规则窗体（Irregular Windows）指的是那些形状非标准矩形的窗口，通常用于实现一些独特或富有创意的用户界面效果。在Android系统中，默认情况下，所有的Activity都以矩形形式呈现，但通过自定义...
4. **Canvas控件**：Canvas提供了绝对定位能力，是实现不规则窗体布局的理想选择，因为可以在Canvas上自由放置和排列元素。 5. **Effect**：与WPF的BitmapEffect类似，Silverlight使用Effect（如DropShadowEffect）...
异形零件因其不规则形状，排版时的难度显著增加，而OpenNesting通过先进的算法设计，成功地解决了这一难题。它能有效地计算出最佳的布局方案，最大化地利用材料，从而降低废料产生，提升生产效率。 此外，...
1. "Jenga_arrangement.jpg"：这可能是示例图像，展示了不规则图形以及可能的矩形排列，如同积木游戏Jenga的堆叠方式。 2. "FindLargestRectangles.m"：这是一个MATLAB脚本，很可能包含了寻找最大矩形的算法。MATLAB...
在Halcon中，这个概念通常应用于检测不规则形状的物体，以便进行定位、测量或识别。 Halcon提供的`get_rectangle2_points`函数就是用来获取这样的最小外接矩形的四个顶点。这个函数接受一个点集作为输入，然后计算...
不规则二维数组是指行或列长度不一致的数组，与常规的矩形二维数组不同，它的形状可能更加复杂。这种类型的数组在处理时需要特别注意边界条件和遍历方式。 第一种方法是通过数组的倒置来求解列最小值。倒置操作通常...
本话题主要关注"不规则排序"，这意味着我们将探讨如何通过自定义UICollectionViewLayout来实现非标准的、灵活的布局方式，特别是涉及到动态高度调整和多选cell的功能。 首先，`UICollectionViewFlowLayout`是...
在Windows操作系统中，不规则窗体（Irregular Windows）是指那些形状不局限于矩形或标准形状的窗口。这种窗体通常用于实现具有特殊视觉效果的应用程序，比如游戏、图形编辑软件或者任何希望突出个性化和独特性的软件...
该文献中提到的“计算不规则零件的包围盒”是一种将问题简化的方法，通过为每个不规则零件计算出一个最小的能够包含该零件的矩形区域（包围盒），将原本复杂的不规则形状问题转化为规则的矩形排样问题。这是实现遗传...
这类问题的特点是需要在有限的材料空间内排列多个形状不规则的物体，以最小化浪费和最大化材料利用率为目标进行优化排布。 解决这类问题的传统方法包括遗传算法和模拟退火算法，但它们通常只能提供近似解，而寻找...