germanysbestkeptsecret / Wookmark-jQuery

A jQuery plugin to create a dynamic, multi-column layout.
MIT License
2.63k stars 759 forks source link

Doing more Justified distribution.. Like Fab.com #1

Closed cemkozinoglu closed 12 years ago

cemkozinoglu commented 12 years ago

I needed more Fab.com Feeds effect so I modified the code a bit, so the boxes are more justified effect rather than getting more "centered" effect..:

Modify:

//var offset = Math.round((containerWidth - (columns_columnWidth-options.offset))/2); var offset = Math.round((containerWidth - (columns_columnWidth-options.offset))/(columns-1));

And: //left: (shortestIndex_columnWidth + offset )+'px' left: (shortestIndex_columnWidth + (shortestIndex*offset) )+'px'

GBKS commented 12 years ago

Do you maybe have a visual example of this. I just looked at fab.com and can't figure out what you mean by the justified effect.

Larceniii commented 12 years ago

I think he's referring to http://fab.com/feed/ However, it just looks like all the boxes are near equal height...

GBKS commented 12 years ago

Makes sense now. The difference is that the spacing between columns is adjusted based on the browser/page width.

cemkozinoglu commented 12 years ago

https://gist.github.com/1827897 (here is the modified version) I also added Margin option .. that way you can have some fixed (left & right) margins

Larceniii commented 12 years ago

nice! I like mine close in the middle and no so spread out. This is a case by case opinion of course, as on an image gallery it makes sense. In my case, it's much wordier so I like em' a little tighter.

cemkozinoglu commented 12 years ago

@Larceniii I agree actually the centered approach looks better. The thing that I realized Fab.com/feed does is a hybrid of both approaches we are talking about..

You will realize it does center things but then -- the window margins left&right are also dynamically adjusted, as the space between the boxes are dynamically adjusted as well..

Haven't tried coding it yet - but i think their approach in more detail looks bit better.. To see it clearer try to Re-size the window to 2 boxes.. you gonna see Wookmark version will make things cluster in middle with huge left&right margins.. My version will create a huge margin btw boxes in middle and smaller on the right&left margins..

Oh well :) some time soon will try to code it, if of course maybe @GBKS will do it for us O:)

Larceniii commented 12 years ago

Ahh That's the exact same problem I was having! I thought it was my layout. When I was using the 100% width layout it wasn't noticeable at all! Thanks for pointing that out @cemkozinoglu !