JQuery plugin to arrange images using knapsack algorithm

[vog]

Great idea! However, the term "knapsack algorithm" is quite misleading.

There is the "knapsack problem", but there are various different algorithms to solve it. Which of those has been used? Why this and not another algorithm? All those questions are concealed behind the squishy term "knapsack algoritm".

[gauravsc]

We have used Knapsack 0-1 algorithm, since in our case images had different widths but the same height, we wanted to fit in as many images as possible so that they fit in the best way possible. We gave value 1 to each image and weight equal to width and use the total width of container of images as the maximum weight allowed.

[omgmog]

Whipped up a quick example, it seems to re-order the images in a way to fit the most it can on each row given the width constraints and the width of each image - http://jsfiddle.net/vXbCY/

[heroic]

Thanks! Mind if I include this on the github link?

[zsherman]

I wish there was a quick link to an example.

[jmathai]

https://github.com/heroic/Rucksack/issues/1

[riffraff]

what is the "knapsack algorithm" ?

I understand how arranging images may be a "knapsack problem" but I can't pinpoint what the algorithm is supposed to be.

[gauravsc]

Plugin co-author: I have answered it in the above comments, see if that suffices.

[jmathai]

I believe this is similar to the layout used for G+ photos and Flickr's new justified view. Am I right?

We adapted the script below for http://current.openphoto.me/photo/list --- curious to check this out as well.

http://www.techbits.de/2011/10/25/building-a-google-plus-ins...

[true_religion]

It's similar but not the same.

The Google+ and Google Image Search will resize and crop the image by width to fit a specified row, greedily optimizing for the maximum number of images per row.

Interesting you bring up [1] because I used a variation of that technique in my own site [2].

You can greatly simplify things if you resize all the images on the backend to the same width, then all you have to do is crop in the frontend to the minimum height in a row.

The trade off is the distortion happens by height rather than width, so you could end up cutting off someones head in a photo-gallery.

My patchwork solution now is to approximate the cropping that would be done in the rule of 3rds with a certain offset (so we lose dead space at the top).

A better technique would be to dynamically determine where a face was in the picture, and center on that. This plugin might help but you'd be better off passing that information from the backend. [3]

[1] http://www.techbits.de/2011/10/25/building-a-google-plus-ins...

[2] http://www.picociti.com

[3] http://facedetection.jaysalvat.com/

[moe]

Aren't most (all?) knapsack solvers greedy?

That doesn't seem like a good idea just to arrange some images (battery killer?).

[heroic]

Hi frooxie, in that example there are 2 containers. #container1 is without plugin, and #container2 is with the plugin. Try scrolling in the iframe and you will see the arranged images.

[gauravsc]

Plugin co-author here: One more possible extension of this algo would be to use value of each image equal to the weight of each image. This would ensure best fit and would be one more way to make things look beautiful and arranged.

[dangoldin]

Pretty interesting stuff. Have you heard of the Isotope jQuery library? It does something similar.

How is the performance on this one?

[heroic]

The isotope library is based on the masonry library, which will not work like rucksack to arrange items that have random width.