Wookmark with dynamic lists

Hey guys,

I’m looking at a Pinterest style lists and found Wookmark.

This is done using lists:

<ul id="tiles">
	<li><img src="images/image_1.jpg" width="200" height="283"><p>1</p></li>
	<li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li>

with this JS:

$(document).ready(new function() {
	// Call the layout function.
	$('#tiles li').wookmark({
		autoResize: true, // This will auto-update the layout when the browser window is resized.
		container: $('#tiles'), // Optional, used for some extra CSS styling
		offset: 2, // Optional, the distance between grid items
		itemWidth: 210 // Optional, the width of a grid item
	});
});

Any ideas how to integrate Wookmark with a dynamic list?

i think what you’re looking for is this:

I was getting some clipping issues with parts of my div’s stretching into the next column using this method.

That’s why I thought I would look into the JS so that my div’s auto resize to fit the grid size.