CSS Flow Design Test with jQuery Masonry

<?php
header('Content-type: text/html; charset=UTF-8');

$numOfBoxes = 12;

$lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna ligula, fringilla at tempor ac, sagittis eu metus. Duis tempus malesuada nisl ac molestie. Duis non quam et elit tempus rhoncus sed quis neque. Aliquam erat volutpat. Sed rutrum mollis pharetra. Nullam vel enim non risus imperdiet accumsan ut at est. Phasellus vel interdum diam. Praesent volutpat purus sed justo consequat ut faucibus est laoreet. Sed ultrices fringilla magna nec pellentesque. Aliquam mattis pretium nibh vel tincidunt. Vivamus tincidunt placerat diam, a iaculis sem ultricies vitae. Praesent vestibulum dignissim sem, eget bibendum dui sodales vitae.";

?>
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Flow Design Test</title>
<style type="text/css">
<!--
body {
    background:#CCCCCC;
}
.flowBox {
    background:#FFFFFF;
    margin:10px;
    float:left;
    padding:10px;
    width:250px;
    border:#999999 1px solid;
}
.clear {
    clear:both;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script>

$(window).load(function(){

    $('#container').masonry({
        // options
        itemSelector : '.flowBox',
    });

});

</script>
</head>

<body>
<div id="container">
<?php
for($i = 0; $i < $numOfBoxes; $i++){
?>
<div class="flowBox">
    <h1>
        <?php
        print "Header " . $i;
        ?>
    </h1>
    <?php
    $start = rand(0, (strlen($lorem)-20));
    $lenght = strlen($lorem)-$start;
    print substr($lorem, $start, $lenght);
    ?>
</div>
<?php
}
?>
</div>
<div class="clear"></div>
</body>
</html>