Offset.top is always the same number, why?

Offset.top is always the same number, why?

This is my css and my jquery code. However it should have different offsets it doesn't. I guess it only takes the first object. How can I solve this?

<div id="blocks">
   <ul>
       <li><a href="#"><img src="portfolio/alles.jpg" alt="" /></a></li>
      <li><a href="#"><img src="portfolio/bart.jpg" alt="" /></a></li>
        <li><a href="#"><img src="portfolio/ei.jpg" alt="" /></a></li>
        <li><a href="#"><img src="portfolio/hout.jpg" alt="" /></a></li>
        <li><a href="#"><img src="portfolio/ronde.jpg" alt="" /></a></li>
        <li><a href="#"><img src="portfolio/tafel.jpg" alt="" /></a></li>
      <li><a href="#"><img src="portfolio/tekenen.jpg" alt="" /></a></li>
        <li><a href="#"><img src="portfolio/tuin.jpg" alt="" /></a></li>
        <li><a href="#"><img src="portfolio/voeten.jpg" alt="" /></a></li>
        <li><a href="#"><img src="portfolio/zagen.jpg" alt="" /></a></li>
        <li><a  href="#"><img src="portfolio/zwart.jpg" alt="" /></a></li>
    </ul>
</div>


   return this.each(function() {
         var par = $(this);
         var li = $("li", par);
         var test = $(li).offset().top;
         li.html(test);
      });


$("#blocks").blocks();