xylw
- 浏览: 61025 次
- 性别:
- 来自: 南宁
-
文章分类
最新评论
不规则矩形的排列
<!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>
分享到：
发表评论
相关推荐
三菱FX3G FX3S与四台E700变频器Modbus RTU通讯控制：正反转、频率设定与读取方案,三菱FX3G FX3S与四台E700变频器通讯：Modbus RTU协议实现正反转、频率设定与控制，快速反馈与教程包含,三菱FX3G FX3S 485协议通讯四台三菱E700变频器程序资料 三菱FX3G FX3S+485bd扩展，采用modbus rtu协议，crc校验，通讯控制四台E700变频器，可以实现正反转，停止，频率的设定，频率，电流等的读取。 反馈快，使用方便，包括教程，plc和触摸屏程序，变频器参数设置和接线，别的变频器支持rtu协议也可以实现。 ,三菱FX系列PLC; 485协议通讯; 变频器E700; 通讯控制; 参数设置; 教程。,三菱PLC控制E700变频器：485协议通讯与程序设置全解
1、文件内容：hyphen-nl-0.20050617-10.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/hyphen-nl-0.20050617-10.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊
西门子S7-1200PLC结构化编程在5轴伺服项目中的应用：模块化设计、触摸屏控制及电气图纸实战解析,西门子S7-1200PLC结构化编程实现多轴联动与多种伺服功能应用：CAD图纸、PLC程序和触摸屏程序协同运作。,西门子S7-1200PLC结构化编程5轴伺服项目 ，包含plc程序、威纶通触摸屏程序、cad电气图纸。 可以实现以下功能，规格有： 1.三轴机械手X轴-Y轴-Z轴联动取放料PTO脉冲定位控制台达B2伺服 2.台达伺服速度模式应用+扭矩模式应用实现收放卷 3.程序为结构化编程,每一功能为模块化设计,功能:自动_手动_单步_暂停后原位置继续运行_轴断电保持_报警功能_气缸运行及报警. 4.每个功能块可以无数次重复调用，可以建成库，用时调出即可 5.上位机采样威纶通触摸屏 6.参考本案例熟悉掌握结构化编程技巧,扩展逻辑思维。 博图14以上都可以打开 ,核心关键词：西门子S7-1200PLC; 结构化编程; 5轴伺服项目; PLC程序; 威纶通触摸屏程序; CAD电气图纸; 三轴机械手; PTO脉冲定位控制; 台达B2伺服; 速度模式应用; 扭矩模式应用; 模块化设计; 轴断电保
情感分析算法在多个领域有着广泛的应用场景和丰富的案例
基于MATLAB仿真的MMC整流站与逆变站柔性互联技术研究：快速工况仿真与环流抑制控制,基于MATLAB仿真的MMC整流站与逆变站运行分析及四端柔性互联工况仿真模拟研究,21电平MMC整流站、MMC逆变站、两端柔性互联的MATLAB仿真模型，4端柔性互联、MMC桥臂平均值模型、MMC聚合模型（四端21电平一分钟即能完成2s的工况仿真） 1-全部能正常运行，图四和图五为仿真波形 2-双闭环控制，逆变站PQ控制，整流站站Udc Q控制 3-最近电平逼近调制+子模块电容充电 4-环流抑制控制 ,1. 21电平MMC整流站; 2. MMC逆变站; 3. MATLAB仿真模型; 4. 两端柔性互联; 5. 桥臂平均值模型; 6. 聚合模型; 7. 双闭环控制; 8. 最近电平逼近调制; 9. 子模块电容充电; 10. 环流抑制控制。,基于柔性互联的MMC系统仿真模型：多电平控制与环流抑制研究
有效应对网络舆情教育培训PPT.pptx
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
Matlab领域上传的视频是由对应的完整代码运行得来的，完整代码皆可运行，亲测可用，适合小白； 1、从视频里可见完整代码的内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
淘宝买的，直接分享给大家了，没有测试环境，也没有办法去测。但我想，他应该是可以用的
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
ACM比赛经验分享（基础知识与算法准备等）
运行GUI版本，可二开
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
该是指包含恶意网址的数据库或数据集，它通常被用于网络安全研究、恶意软件检测、网络欺诈防范等领域。研究人员和安全专家会利用这个数据集来分析恶意网址的特征、行为模式，进而开发出相应的检测算法和防护措施，以识别和阻止恶意网址对用户设备和网络环境造成的潜在威胁。该数据集包含约 651,191 条经过标记的 URL，涵盖了四种主要类型：良性（Benign）、篡改（Defacement）、钓鱼（Phishing）和恶意软件（Malware）。其中，良性 URL 占据了约 428,103 条，篡改 URL 有 96,457 条，钓鱼 URL 为 94,111 条，而恶意软件 URL 则有 32,520 条。该数据集的显著特点是其多类别分类的全面性，不仅包括常见的恶意 URL 类型，还涵盖了大量良性 URL，使得研究人员能够更全面地理解和区分不同类型的 URL。此外，数据集以原始的 URL 形式提供，研究人员可以根据需要提取和创建特征，而不受预设特征的限制。
字卡v4.3.4 原版 三种UI+关键字卡控制+支持获取用户信息+支持强制关注 集卡模块从一开始的版本到助力版本再到现在的新规则版本。 集卡模块难度主要在于 如何控制各种不同的字卡组合 被粉丝集齐的数量。 如果不控制那么一定会出现超过数量的粉丝集到指定的字卡组合，造成奖品不够的混乱，如果大奖价值高的话，超过数量的粉丝集到大奖后，就造成商家的活动费用超支了。我们冥思苦想如何才能限制集到指定字卡组合的粉丝数，后我们想到了和支付宝一样的选一张关键字卡来进行规则设置的方式来进行限制，根据奖品所需的关键字卡数，设定规则就可以控制每种奖品所需字卡组合被粉丝集到的数量，规则可以在活动进行中根据需要进行修改，活动规则灵活度高。新版的集卡规则，在此次政府发布号的活动中经受了考验，集到指定字卡组合的粉丝没有超出规则限制。有了这个规则限制后，您无需盯着活动，建好活动后就无人值守让活动进行就行了，您只需要时不时来看下蹭蹭上涨的活动数据即可。 被封？ 无需担心，模块内置有防封功能，支持隐藏主域名，显示炮灰域名，保护活动安全进行。 活动准备？ 只需要您有一个认证服务号即可，支持订阅号借用认证服务号来做活动。如果您
DSP28035的CAN通信升级方案：包括源码、测试固件与C#上位机开发，支持周立功USBCAN-II兼容盒及BootLoader闪烁指示,DSP28035的CAN升级方案及详细配置说明：使用新动力开发板与C#上位机软件实现固件升级，涉及用户代码、BootLoader代码及硬件连接细节,DSP28035的can升级方案 提供源代码，测试用固件。 上位机采用c#开发。 说明 一、介绍 1、测试平台介绍：采用M新动力的DSP28035开发板，CAN口使用GPIO30\31。波特率为500K。 2、28035__APP为测试用的用户代码，ccs10.3.1工程，参考其CMD配置。 3、28035_Bootloader_CAN为bootloader源代码，ccs10.3.1工程； 4、SWJ为上位机，采用VS2013开发，C#语言。 5、测试使用的是周立功的USBCAN-II，can盒，如果用一些国产可以兼容周立功的，则更这里面的ControlCAN.dll即可。 6、升级的app工程需要生成hex去升级，具体参考我给的工程的设置。 7、BootLoader代码，只有D400这一个灯1s闪烁一
基于Matlab的数字验证码识别系统：预处理与不变矩算法的实践应用及GUI界面构建,基于MATLAB不变矩算法的数字验证码识别系统设计与实现,基于matlab不变矩算法实现数字验证码 过程：先对验证图像进行去噪、定位、归一化等预处理，然后计算待识别数字的不变矩，再进行特征匹配，得到识别结果。 以Matlab软件为开发平台来进行设计实现及仿真，并构建相应的GUI界面。 实验结果表明利用不变矩在识别数字验证码方面具有可行性。 ,关键词：Matlab；不变矩算法；数字验证码；预处理；特征匹配；GUI界面；实验验证；可行性。,Matlab实现数字验证码识别：预处理与不变矩算法的GUI仿真
基于STM32F103的磁编码器通讯方案：原理图、PCB设计与源码实现，附多摩川协议手册解析,基于STM32F103的精准多摩川绝对值磁编码器通讯解决方案：原理图、PCB设计与源码实践手册，完整包含多摩川协议解析,基于STM32F103的多摩川绝对值磁编码器通讯方案 包含：原理图，PCB，源码，多摩川协议手册 ,核心关键词：STM32F103；多摩川绝对值磁编码器；通讯方案；原理图；PCB；源码；多摩川协议手册；,基于STM32F103的绝对值磁编码器通讯方案：原理图PCB与源码解析，附多摩川协议手册
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
php项目之学生成绩查询系统源码，项目仅供学习参考使用