Skip to content
This repository has been archived by the owner on May 5, 2019. It is now read-only.

Commit

Permalink
special cases added for nicer visual
Browse files Browse the repository at this point in the history
  • Loading branch information
@archiloque
archiloque committed Apr 22, 2012
1 parent 956aabd commit 38bf1d1
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 25 deletions.
18 changes: 18 additions & 0 deletions index.html
View file
Expand Up @@ -134,6 +134,24 @@ <h1>Examples</h1>
</div>
</td></tr></table>

<table><tr><td>
<div id="example6" style="width: 300px;" class="example">
<div class="block" style="width: 90px;height: 190px;">1</div>
<div class="block" style="width: 90px;height: 90px;">2</div>
<div class="block" style="width: 90px;height: 90px;">3</div>
<div class="block" style="width: 90px;height: 190px;">4</div>
</div>
</td></tr></table>

<table><tr><td>
<div id="example7" style="width: 400px;" class="example">
<div class="block" style="width: 190px;height: 190px;">1</div>
<div class="block" style="width: 90px;height: 90px;">2</div>
<div class="block" style="width: 90px;height: 90px;">3</div>
<div class="block" style="width: 90px;height: 190px;">4</div>
</div>
</td></tr></table>

<h1>License</h1>

<p>Except files with their own copyright license:</p>
Expand Down
103 changes: 78 additions & 25 deletions jquery.compactWall.js
View file
Expand Up @@ -55,16 +55,32 @@

} else {
// same height but narrower : we move the slot to the right
//@todo: possibly merge with slot above
newSlots = slots.slice(0, slotIndex)
.concat([
{
top: slot.top,
left: slot.left + block.width,
availableWidth: (slot.availableWidth - block.width),
availableHeight: block.height
}
]).concat(slots.slice(slotIndex + 1));
if ((slots.length > (slotIndex + 1)) &&
(slots[slotIndex + 1].left == (slot.left + block.width)) &&
(slots[slotIndex + 1].availableWidth == (slot.availableWidth - block.width))) {
// wannabe new position is aligned with the next slot
// this design could have been reached by another organisation
// but visually it is interesting
newSlots = slots.slice(0, slotIndex)
.concat([
{
top: slots[slotIndex + 1].top,
left: slots[slotIndex + 1].left,
availableWidth: slots[slotIndex + 1].availableWidth,
availableHeight: (slots[slotIndex + 1].availableHeight + block.height)
}
]).concat(slots.slice(slotIndex + 2));
} else {
newSlots = slots.slice(0, slotIndex)
.concat([
{
top: slot.top,
left: slot.left + block.width,
availableWidth: (slot.availableWidth - block.width),
availableHeight: block.height
}
]).concat(slots.slice(slotIndex + 1));
}
}
} else {
// the blocks is smaller
Expand All @@ -82,22 +98,59 @@
} else {
// smaller width and smaller height: we move the slot to the bottom
// and add another slot for the upper right corner of the block
//@todo: possibly merge with slot above
newSlots = slots.slice(0, slotIndex)
.concat([
{
top: slot.top + block.height,
left: slot.left,
availableWidth: slot.availableWidth,
availableHeight: (slot.availableHeight - block.height)
},
{
top: slot.top,
left: slot.left + block.width,
availableWidth: (slot.availableWidth - block.width),
availableHeight: block.height
if ((slots.length > (slotIndex + 1)) &&
(slots[slotIndex + 1].left == (slot.left + block.width)) &&
(slots[slotIndex + 1].availableWidth == (slot.availableWidth - block.width))) {
// wannabe new slot is aligned with the next slot
// this design could have been reached by another organisation
// but visually it is interesting
if (slotIndex == 0) {
// the current slot is the first one
// move it to the bottom and increase height of next one
newSlots = [
{
top: slot.top + block.height,
left: 0,
availableWidth: slot.availableWidth,
availableHeight: Number.Infinity
},
{
top: slots[slotIndex + 1].top,
left: slots[slotIndex + 1].left,
availableWidth: slots[slotIndex + 1].availableWidth,
availableHeight: (slots[slotIndex + 1].availableHeight + block.height)
}
].concat(slots.slice(slotIndex + 2));
} else {
// current slot is not the first one
// increase the size of next one
newSlots = slots.slice(0, slotIndex)
.concat([
{
top: slots[slotIndex + 1].top,
left: slots[slotIndex + 1].left,
availableWidth: slots[slotIndex + 1].availableWidth,
availableHeight: (slots[slotIndex + 1].availableHeight + block.height)
}
]).concat(slots.slice(slotIndex + 2));
}
]).concat(slots.slice(slotIndex + 1));
} else {
newSlots = slots.slice(0, slotIndex)
.concat([
{
top: slot.top + block.height,
left: slot.left,
availableWidth: slot.availableWidth,
availableHeight: (slot.availableHeight - block.height)
},
{
top: slot.top,
left: slot.left + block.width,
availableWidth: (slot.availableWidth - block.width),
availableHeight: block.height
}
]).concat(slots.slice(slotIndex + 1));
}
}
}

Expand Down

0 comments on commit 38bf1d1

Please sign in to comment.