Where can I find jQuery masonry live demo?

Question

I a UX designer exploring the Masonry interface for a project.

I want to upload my own blocks (photos of various sizes), and play around with the parameters to see how they influence the layout. I've looked for an online demo with an "upload" option, but couldn't find one.

Here's the closest example I could find: http://tyler-designs.com/masonry-ui/ — Shira, Aug 12 '12 at 13:50
There is no online demo where you can upload images to have them Masonry-fied and then go through Masonry's options. The plugin is, like its big brother Isotope, so easy to implement that you can easily test it yourself. — Systembolaget, Aug 13 '12 at 18:31

score 3 · Answer 1 · answered Dec 21 '12 at 13:29

3

If you go to http://masonry.desandro.com/ it has a number of demos there along with the code to download.

Hope this helps.

answered Dec 21 '12 at 13:29

webdevZ

31
4

Micromega · Answer 2 · 2013-11-08T15:00:56.137

2

You can find a version here: http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/. There is also the wookmark jquery plugin which is free and less heavy: http://www.wookmark.com/jquery-plugin. Here is an example of a 2d-bin-packing in JS: http://incise.org/2d-bin-packing-with-javascript-and-canvas.html. There is also packagery from the same developer.

edited Nov 08 '13 at 15:00

answered Aug 12 '12 at 14:01

Micromega

12,486
7
35
72

score 1 · Answer 3 · edited Sep 23 '12 at 09:00

I would use Visual Studio Web Developer 2010 Express and make a localhost site with Desandro's masonry.js. found here. Its pretty simplistic to use. I had to put the script code before the end </body> tag to make it function correctly, but it might be different in other applications. And you have to get jquery.js, Desandro, (the coder for masonry) tells you how to implement it on his site.

Masonry.js is free to use, however isotope is non commercial unless you pay $25 to use it commercially.

Where can I find jQuery masonry live demo?

3 Answers3