1

I don't know how to properly specify what I want in English, I ask for your help. I need an algorithm to place a number of rectangles into another rectangle like on this site.

Can someone tell me what this algorithm is called or provide any other useful info/links? There is probably some sort of a math method with its own name to do this.

tckmn
  • 57,719
  • 27
  • 114
  • 156
Marius
  • 3,976
  • 5
  • 37
  • 52
  • 2
    the images on that page are just scaled to the same width and added on top of each other. – Johan Lundberg Jun 16 '13 at 16:57
  • Try this question/answers: http://stackoverflow.com/questions/3476778/find-k-rectangles-so-that-they-cover-the-maximum-number-of-points – darijan Jun 16 '13 at 16:59
  • That might be true, but i know there's an algorithm to do it properly when you don't scale images to have equal widths. I just have no idea how it's called, bu i've seen it somewhere previously. – Marius Jun 16 '13 at 17:01
  • Marius: You should then update your question to ask for how to do it with unequal widths. The question as asked is asking for "jQuery Masonry" as the answer, but your intended question is asking for the mathematics behind rectangle-packing as an answer. In actuality, you may wish to think about your constraints a bit more (perhaps you have the ability to resize images, and need to decide what to do if your images cannot fit perfectly (as is almost certainly the case)... do you leave empty room on the sides or resize, etc.). – ninjagecko Jun 16 '13 at 17:32

3 Answers3

3

jQuery Masonry is used to do what you are looking for. That's the algorithm or plug-in you need.

Here are some links to get you started:

Example 1

Fiddle Example

HTML

<div id="container">
<div class="item"></div>
<div class="item w2"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item w2 h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item w2"></div>
<div class="item h2"></div>
<div class="item"></div>
<div class="item h2"></div>
</div>

CSS

body {
font-family: sans-serif;
}

#container {
border: 1px solid;
padding: 5px;
}

.item {
width: 60px;
height: 60px;
float: left;
margin: 5px;
background: #CCC;
}

.item.w2 {
width: 130px;
}

.item.h2 {
height: 130px;
}

JavaScript

$( function() {

$('#container').masonry({
    itemSelector: '.item',
    columnWidth: 70
});

});
Next Door Engineer
  • 2,818
  • 4
  • 20
  • 33
  • Thank you for taking the time. I'll study the library code to see if it's what i'm looking for. – Marius Jun 16 '13 at 20:14
2

Most such implementations use dynamic positioning using javascript. You might want to check out jquery masonry. Its a cascading grid layout library written in javascript. This is the link to the github source (check out masonry.js)

Harry
  • 394
  • 2
  • 10
2

The problem is called rectangle packing.

The full rectangle packing problem takes a set of rectangles as inputs and is supposed to find a packing that occupies the least area. This is insanely hard to do and a topic of ongoing research (PDF).

Fortunately, things get a lot easier if you are already happy with a 'good' solution and don't need the absolute minimum. In particular, a very efficient approximation is so called sliced packing. The idea is basically creating a 2-dimensional kd-Tree for packing.

This site has an excellent explanation of how it works.

ComicSansMS
  • 51,484
  • 14
  • 155
  • 166