0

I've this beautiful design I'd like to code. But I'm struggling with masonry layout of the content section.

There are 500*500px, 250*500, 250*250 blocks.

enter image description here

I tried to use isotope and test out different layout modes, but none seems to fit the design. http://isotope.metafizzy.co/ examples though look much better. oh and my test site is here: http://mac.idev.ge:800/test/

What can I do? Should I roll out my own algorithm, or is there an easy solution? :) maybe I'm using isotope in a wrong way?

1 Answers1

0

The problem with Isotope is that it tries to lay out the items in the order supplied (it allows sorting so assumes order is at least a little important).

You can alter the layout in a few ways.

  • change the order of your items (based on the layout width),
  • use a custom layout for Isotope (there is at least one bin-packing based one out there),
  • write your own custom layout for isotope (I can vouch for this being quite difficult),
  • or switch to using something like Packery.

Packery does not have the same feature set as Isotope (no sorting or filtering), but may be a better choice for your interface.

iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202
  • Hi, thanks for suggestion, I don't need sorting or filtering. –  Sep 18 '13 at 09:42
  • I cannot make packery to use "meticulous" layout mode, any ideas? http://stackoverflow.com/questions/18871162/packery-how-to-change-layout-mode otherwise it gives me exactly same masonry grid as isotope. –  Sep 18 '13 at 11:44
  • @Sandro Dzneladze: Are you able to setup a basic JSFiddle of your new version using Packery? In my experience I usually solve the problem myself in the process of setting up a JSFiddle (because it takes away all the unrelated stuff and makes you approach it fresh). – iCollect.it Ltd Sep 18 '13 at 13:10