Make List Items float to left and stack up with no space below them

I'm trying to get some li's inside a ul float to the left and stack on eachother.

The format of the ul is

<ul&g开发者_如何学Ct;
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

This menu is server side generated and cannot be modified.

I've setup a demo to illustrate what i get, and what im after:

What i get: http://jsfiddle.net/VVyF7/1/

What im after, but without using the positioning as the lis will be dynamically rendered: http://jsfiddle.net/VVyF7/3/

That layout in the dynamic case can't be done using CSS.

If you can't change the HTML to have two columns, you'll have to use JavaScript.

jQuery Masonry is the best option. There's also Vanilla Masonry, which is a raw JavaScript version that doesn't rely on jQuery.