Closed cemkozinoglu closed 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.
I think he's referring to http://fab.com/feed/ However, it just looks like all the boxes are near equal height...
Makes sense now. The difference is that the spacing between columns is adjusted based on the browser/page width.
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
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.
@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:)
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 !
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'