Masonry is the Prototype JS port of jQuery Masonry by David DeSandro.

This button demonstrates how to append new content to a layout using Masonry. Each time this button is clicked, new box elements are created, wrapped in an unstyled div. This content is first appended to the wrapping container, then the boxes are rearranged with a Masonry() call. appendedContent was the only option to specify since Masonry saves all previous options. Using appendedContent, the Masonry script saves some processing time as it only rearranges the box(es) inside that appended container.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.

Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula

This is the box with no width set

Sit amet mi ullamcorper vehicula

adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.

Sit amet mi ullamcorper vehicula

Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.

Finally, using the callback function, the new boxes are dynamically styled.

document.observe("dom:loaded", function() {
	new Masonry($('primary_masonry'),{columnWidth: 100, itemSelector: '.box'});
 
	$('append_primary').observe('click', function() {
		var moreContent = makeNewBoxes(3);
		$('primary_masonry').insert({bottom: moreContent});
		new Masonry($('primary_masonry'),{ appendedContent: moreContent },
			function(){ if(this != undefined){
				this.each(function(el){
					el.setStyle({background: '#222', color: '#EEE' });
				});
			}
		});
	});
});