Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="CollectionPager" Namespace="SiteUtils" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link rel="stylesheet" href="css/style2.css" type="text/css" media="screen" />
    <style type="text/css">
     #next { display:block!important; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; border: 1px solid #ddd; background: #efefef; text-align: center; font-weight: bold; box-shadow: 2px 2px 2px rgba(50,50,50,0.4); color: #444; text-decoration: none; padding: 5px;}
     #next:hover { background: #dfdfdf; color: #222;}
  </style>
</head>
<body>
<form id="form1" runat="server" style="width:900px;">

<asp:Repeater ID="repeater1" runat="server">
        <itemtemplate>
        <div class="box">
            <%# DataBinder.Eval(Container.DataItem, "ProdName")%><br />
            <img alt="" src="<%# DataBinder.Eval(Container.DataItem, "ProdImg") %>" />
        </div>
        </itemtemplate>
</asp:Repeater>
<div id="content"></div>

    <cc1:CollectionPager ID="CollectionPager1" runat="server" ControlCssClass="nav1">
    </cc1:CollectionPager>

    <div id="footer">
         <a id="next" href="Default.aspx?Page=2">more</a>
    </div>
<script src="../js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="../jquery.masonry.min.js" type="text/javascript"></script>
<script src="../js/infinite.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function(){

    var $container = $('#content');

    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector: '.box',
        columnWidth: 100
      });
    });

    $container.infinitescroll(
    {
      pathParse: ["http://localhost:58539/Shop2/Default.aspx?Page=",""],
      navSelector  : "a#next:last",    // selector for the paged navigation
      nextSelector : "a#next:last",  // selector for the NEXT link (to page 2)
      itemSelector : ".box",     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://i.imgur.com/6RMhx.gif' }},
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true );
        });
      }
    );
  });
</script>
 </form>
 </body>
</html>