JLayout — JavaScript Layout Algorithms

http://www.bramstein.com/projects/jlayout/

by mahmud • 16 years ago

45 9 16 years ago

NathanKP3• 16 years ago

I really didn't find this algorithm to be as good as jQuery Masonry, posted on here a week or so ago:

http://desandro.com/resources/jquery-masonry/

Basically, jQuery Masonry does intelligent layout, but JLayout is just doing things which can be done with ordinary floats or even tables. It might seem archaic to use tables for layouts such as this but they work even if JavaScript is turned off. And clever use of floats and min-width and max-width can achieve the same effect as well.

Why use JavaScript for something simple that can be done using CSS?

pak• 16 years ago

another significant drawback of JavaScript layout is that it creates very noticeable flash-of-unstyled-content, since the page isn't being laid out incrementally.

NathanKP3• 16 years ago

That can actually be worked around easily enough by giving the content "display: none" CSS styling and then using the JavaScript code to display the content after it is laid out.

However, if JavaScript is turned off the content will never show, so that is a problem.

minalecs• 16 years ago

as a programmer.. I really suck at css and layout. Working on projects as a single programmer (startup type projects) I can't go out and hire a css guy and web design person. For me something like this is a no brainer, instead spending time trying to figure out why something is not positioned in one browser vs another.

n8agrin• 16 years ago

I don't think the point of this library is to provide a best fit layout as Masonry tries to. Instead this is a layout manager in which you could encode any number of layout algorithms including the Masonry algorithm.

This layout manager design pattern, while likely always less efficient than native browser mechanisms, is something we'll probably see more of as the browser takes on a greater role as an application host. Without programmatic layout to complement or override the browser's native layout system we won't get the sorts of visual UI building systems and application layouts you're starting to see in frameworks like Cappuccino and Sproutcore.

bramstein• 16 years ago

You hit the nail on the head. The library is meant for applications that can not use CSS layout, because the algorithm they need is not possible in CSS, or because they are rendering to a context that does not have layout management such as Canvas or SVG. Think of projects like Mozilla Bespin (https://mozillalabs.com/bespin/) which uses Canvas for drawing its editor. Having standard layout algorithms available would be a great help there.

I was quite hesitant about making the jQuery plugin public because I was fearing reactions such as this. It was meant as a demo, and a nice way to test the layout managers. For a long time I had a message on the jQuery plugin page stating something along the lines of "please, please, consider using CSS before you use this plugin."

The nice thing about programming against a layout manager API is that you can easily write new algorithms while the (DOM) interface remains the same. It would be trivial to write a layout manager that does layout like Masonry. As another example, I'm currently working on a pack layout which can be used to pack small images into a larger one (e.g. CSS sprites,) and a layout manager that implements the CSS box layout module. I was also considering a text layout based on my TeX line breaking work (http://www.bramstein.com/projects/typeset/.)

jasonkester• 16 years ago

Funny, I built this for a client ten years ago (back when NN6 was still in beta), and every time I think back on it I wonder what I was thinking not simply using the browser's HTML engine to lay things out for me. You end up essentially rewriting the hardest bits of the browser in javascript to get everything to lay out properly.

There were actually a few valid reasons for it back then, but now in the age of layout standards, I don't see it as particularly valuable.

JLayout — JavaScript Layout Algorithms

Related Stories