基于jquery的不规则矩形的排列实现代码
这个东西让我想起了俄罗斯方块，这个实现起来很简单，容器里面所有的块元素用绝对定位排列，如果能放的下就放在这里，如果放不下了，在队列中找到能放得下的元素放置，
实在找不到，则换行排列下一行，具体思路是这样。代码里有详细的注释直接看代码吧。
下面是一个demo:
http://demo.jb51.net/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>
相关推荐
-
基于jquery的不规则矩形的排列实现代码
这个东西让我想起了俄罗斯方块,这个实现起来很简单,容器里面所有的块元素用绝对定位排列,如果能放的下就放在这里,如果放不下了,在队列中找到能放得下的元素放置, 实在找不到,则换行排列下一行,具体思路是这样.代码里有详细的注释直接看代码吧. 下面是一个demo: http://demo.jb51.net/js/2012/sortRect/代码打包下载 sortRect.rar 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta
-
基于jQuery实现仿51job城市选择功能实例代码
前些文章用写过,省市县三级联动,但是感觉选择的时候不够直观,现在改进了下,效果如下图 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="City.aspx.cs" Inherits="System_Select_City" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
-
基于jQuery仿淘宝产品图片放大镜代码分享
这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="
-
基于Jquery+Ajax+Json的高效分页实现代码
如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题,欢迎随时联系我, 同时也欢迎高手多给点意见,我不建议在喷子中成长. 本人QQ:364175837 前言 相信很多朋友都用过,Jquery的分页插件,我之前就用的jquery.paper这个,如果有兴趣可以留下QQ,我发份简单的实例源码给您. 该代码是晚上匆忙中完成的,所以没怎么优化,但是主要作为实例来结合这些知识的一个综合运用.好了废话不多说,直接上代码. vs2010+sql2005expre
-
基于jQuery的试卷自动排版系统实现代码
根据提供的试卷题目(是一个干净的只有"数据"的HTML网页)生成一份多页的试卷,用户能执行翻页.具有答题时间限制,展示给用户的试卷中题目需要占用尽量少的空间(比如选择题中把两条较短的选项由两行合并到一行).同一道题目不要跨页面显示以方便答题者,管理员能够改变试卷的样式(字体.颜色.行距.页面边距,像字处理软件一样--),题目之间可以插入一些说明性的文字(比如告知答题者作答的须知等等).题目提干.选择题的选项.说明文字可以包含多媒体信息(文字.图片.列表.表格.视频等等--).选择题选项
-
基于Jquery实现仿百度百科右侧导航代码附源码下载
先给大家展示下效果图,看看是不是亲想要实现的效果,如果还满意的话请查看本文详情,同时大家也可以下载源码哦. 效果图: 效果展示 源码下载 代码说明: 仿百度百科右侧导航代码jquery插件,这个仿百科右侧导航js代码,在很久以前就像搞个用了,因为这个导航特别适合长篇文档使用,花了半天时间写了这个仿百科导航插件,不过和百度百科比起来还是有点弱,没有实现右侧导航区域滚动的功能,如果您的文档不是超级变态长,应该够用. 如果你的导航超级长,可能要用到侧边导航页可以滚动,一般情况下还是用不到,等过些时候
-
基于Jquery的仿照flash放大图片效果代码
Html: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text
-
基于jquery的仿百度搜索框效果代码
先看看整个的效果图:图一: 图二: 图三: 图四: 大概的效果图就这样,接下来直接看源码页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="autoSearch._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DT
-
基于jQuery的公告无限循环滚动实现代码
在线演示:http://demo.jb51.net/js/2012/callboard/jQuery代码 复制代码 代码如下: //第二版:Newton改造 (function (win){ var callboarTimer; var callboard = $('#callboard'); var callboardUl = callboard.find('ul'); var callboardLi = callboard.find('li'); var liLen = callboard.
-
基于jQuery的计算文本框字数的代码
一.功能: 1.用户边输入计算同时进行,告诉用户还剩余多少可输入的字数; 2.当超过规定的字数后,点击确定,会让输入框闪动 二.功能分析 1.重点是用什么事件? 标准浏览器用oninput,而IE则使用onpropertychange ,这两个事件的发生条件,是文本框的值发生改变. 2.字数的计算. 2.1一个中文算两个,一个符号或数字,英文,算一个.(如果是规定140个字,乘以2,那么就是280个) 2.2需要用到Math.ceil方法,因为最后还是要除以2来还原显示给用户的字数; 3.闪动背