Infinite Scroll Photo Gallery

Anyone have some tips or (code you could share) on how to get this gallery working as an Infinite Scroll Gallery?

I've racked my brains on this, but just can't wrap my head around it.

What I'm trying to achieve is to have 6 gallery photos appear on page load.
Once the page is scrolled down beyond the lowest row of gallery photos - it triggers the $galleryMetaData['prevPage'] to load more photos into the gallery, and continues loading more photos into the gallery as the user continues scrolling. Once the last image loads and the page can't scroll any further, the load action stops.

I don't have any existing jQuery, or javascript to make this work, and haven't had any luck finding anything that I think would work.

<?php
   // load records from 'gallery'
  list($galleryRecords, $galleryMetaData) = getRecords(array(
    'tableName'   => 'gallery',
    'loadUploads' => true,
    'allowSearch' => false,
    'orderBy'     => 'createdDate DESC',
    'perPage'     => '6',
  ));
?>

<div class="container">
<?php foreach ($galleryRecords as $record): ?>
   <?php foreach ($record['photo'] as $index => $upload): ?>
      <div class="infinite_scroll">
         <a href="<?php echo $record['_link'] ?>" title="<?php echo htmlencode($record['title']) ?>">
         <img src="<?php echo $upload['thumbUrlPath4'] ?>" width="<?php echo $upload['thumbWidth4'] ?>" height="<?php echo $upload['thumbHeight4'] ?>"/>
         </a>
      </div>
   <?php endforeach ?>
<?php endforeach ?>
</div>

<?php if ($galleryMetaData['prevPage']): ?>
  <!-- this is hidden and is a component to trigger the load more photos -->
   <div class="hidden_div"><a href="<?php echo $lgalleryMetaData['prevPageLink'] ?>">Load More</a></div>
 <!-- /this is hidden and is a component to trigger the load more photos -->
<?php else: ?>
<?php endif ?>


Thanks, Zicky