Recently, I stumbled upon the website http://www.zergnet.com/ and I'm intrigued by how they manage to align divs next to each other seamlessly despite having varying heights. I attempted to replicate this effect by generating random divs with different heights using the code below, but unfortunately, they all ended up leaving empty space above them. How can I modify this code so that each div is positioned only 5px from the top? What adjustments should be made to achieve a layout similar to that of the website?
<?php
for($x = 10; $x > 0; $x--){
$rand = rand(200, 300);
echo '<div
style="
margin: 0 5px 10px 5px;
width:200px; height:'.$rand.'px;
background-color:red;
width: 260px;
float: left;">
<img src="https://www.google.com/images/srpr/logo4w.png" width="260" height="'.$rand.'"></div>';}?>