Yesterday while working on a current job, I came across a simple layout that couldn’t simply be done using CSS. Its been see around a lot lately and is common for mobile devices. I had a ‘news feed’ which I wanted to be displayed in a grid, however due to the fact they would have alternate heights, simply using css float or inline-block would result in vertical uneven spaces.
To solve this I used jQuery to rewrite the html onload and onresize. One of the concerns was the items also needed to display left to right then onto the next line, NOT top to bottom then next coloumn.
The main function determines the number of columns available in the given space, then adds each block to the column using a modulo function to determine the right column.
Feel free to copy and use at your peril, I’de like to here of any improvements.