รบกวนพี่ๆช่วยแนะนำโค๊ดให้ทีครับ เลื่อน scrollbar ลงล่างแล้วแสดงข้อมูลใหม่ๆ

		<div class="content">
			<div class="wrap">
			 <div id="main" role="main">
			      <ul id="tiles">
<?
$sql2="select * from  tb_topic where id_cat='42' order by date  desc LIMIT 0,20";
$result2=mysql_query($sql2,$c);
while( $row2=mysql_fetch_row($result2) ){
$arrayvotepic=explode("@",$row2[21]);
  ?>
			        <li onclick="location.href='test.php';">
			        	<? if($row2[4]==""){echo"<a href='view.php?id=$row2[0]'><img src='../file-photo/nopic.png' border='0'/></a>";}else{echo"<a href='view.php?id=$row2[0]'><img src='../Store/Store-Topic/sphoto/$row2[4]' border='0'/></a>";} ?>
			        	<div class="post-info">
			        		<div class="post-basic-info">
				        		<h3><a href="#"><?=$row2[2]?></a></h3>
				        		<span><a href="#"><label> </label><?=$row2[1]?></a></span>
				        		<p><?=$row2[22]?></p>
			        		</div>
			        	</div>
			        </li>
<?
  }
  ?>
			      </ul>
			    </div>
			</div>
		</div>
		  <script src="smartphone/js/jquery.imagesloaded.js"></script>
		  <script src="smartphone/js/jquery.wookmark.js"></script>
		  <script type="text/javascript">
		    (function ($){
		      var $tiles = $('#tiles'),
		          $handler = $('li', $tiles),
		          $main = $('#main'),
		          $window = $(window),
		          $document = $(document),
		          options = {
		            autoResize: true, // This will auto-update the layout when the browser window is resized.
		            container: $main, // Optional, used for some extra CSS styling
		            offset: 20, // Optional, the distance between grid items
		            itemWidth:260 // Optional, the width of a grid item
		          };
		      /**
		       * Reinitializes the wookmark handler after all images have loaded
		       */
		      function applyLayout() {
		        $tiles.imagesLoaded(function() {
		          // Destroy the old handler
		          if ($handler.wookmarkInstance) {
		            $handler.wookmarkInstance.clear();
		          }
		
		          // Create a new layout handler.
		          $handler = $('li', $tiles);
		          $handler.wookmark(options);
		        });
		      }
		      /**
		       * When scrolled all the way to the bottom, add more tiles
		       */
		      function onScroll() {
		        // Check if we're within 100 pixels of the bottom edge of the broser window.
		        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix
		            closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100);
		
		        if (closeToBottom) {
		          // Get the first then items from the grid, clone them, and add them to the bottom of the grid
		          var $items = $('li', $tiles),
		              $firstTen = $items.slice(0, 10);
		          $tiles.append($firstTen.clone());
		
		          applyLayout();
		        }
		      };
		
		      // Call the layout function for the first time
		      applyLayout();
		
		      // Capture scroll event.
		      $window.bind('scroll.wookmark', onScroll);
		    })(jQuery);
		  </script>