Load Images on Scroll Based on Dropdownlist Value in ASP.Net and jQuery AJAX

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        var pageIndex = 0;
        var pageCount;
        $(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {
                GetRecords($('[id*=ddlCategory]').val());
            }
        });
        $(function () {
            GetRecords($('[id*=ddlCategory]').val());
            $('[id*=ddlCategory]').on('change', function () {
                __doPostBack('<%=UpdatePanel1.ClientID %>', null);
                pageIndex = 0;
                GetRecords($(this).val());
            });
        });

        function GetRecords(categoryId) {
            pageIndex++;
            if (pageIndex == 1 || pageIndex <= pageCount) {
                $("#loader").show();
                $.ajax({
                    type: "POST",
                    url: "CS.aspx/GetImages",
                    data: '{pageIndex: ' + pageIndex + ',categoryId: ' + categoryId + '}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.responseText);
                    },
                    error: function (response) {
                        alert(response.responseText);
                    }
                });
            }
        }
        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
            var images = xml.find("Images");
            var repeatColumns = parseInt("<%=dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns %>");
            var rowCount = Math.ceil(images.length / repeatColumns);
            var j = 0;
            images.each(function () {
                var image = $(this);
                var row = $("[id*=dlImages] .item:last").closest("tr");
                if ($(".is_used[value='1']", row).length == repeatColumns) {
                    row = $("[id*=dlImages] tr").eq(0).clone();
                    $(".is_used", row).val("0");
                    $(".image", row).attr("src", "");
                    $(".button", row).attr("href", "");
                    $(".loader", row).remove();
                    $("[id*=dlImages]").append(row);
                    j = 0;
                } else {
                    row = $("[id*=dlImages] .item:last").closest("tr");
                }
                var cell = $(".item", row).eq(j);
                $(".name", cell).html(image.find("Name").text());
                $(".button", cell).attr("href", image.find("Url").text());
                $(".is_used", cell).attr("value", "1");
                var img = $(".image", cell);
                var loader = $("<img class = 'loader' src = 'loader.gif' />");
                img.after(loader);
                img.hide();
                img.attr("src", image.find("Url").text());
                img.load(function () {
                    $(this).parent().find(".loader").remove();
                    $(this).fadeIn();
                });
                j++;
            });
            $("[id*=dlImages] .is_used[value='0']").closest(".item").remove();
        }
    </script>
    <asp:DropDownList ID="ddlCategory" runat="server">
        <asp:ListItem Text="Select Category" Value="0" />
        <asp:ListItem Text="Category 1" Value="1" />
        <asp:ListItem Text="Category 2" Value="2" />
        <asp:ListItem Text="Category 3" Value="3" />
        <asp:ListItem Text="Category 4" Value="4" />
    </asp:DropDownList>
    <br />
    <br />
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:DataList ID="dlImages" runat="server" RepeatLayout="Table" RepeatColumns="3"
                CellPadding="2" CellSpacing="20">
                <ItemTemplate>
                    <table class="item" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td align="center" class="header">
                                <span class="name">
                                    <%# Eval("Name") %></span>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" class="body">
                                <img class="image" src='<%# Eval("Url") %>' alt="" />
                            </td>
                        </tr>
                        <tr>
                            <td align="center">
                                Photo by <a href="http://www.flickr.com/photos/pearlshelf/">Pearl Photo</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="footer" align="center">
                                <a href='<%# Eval("Url") %>' target="_blank" class="button">View</a>
                                <input type="hidden" class="is_used" value="0" />
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:DataList>
        </ContentTemplate>
    </asp:UpdatePanel>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindDummyItem();
    }
}

private void BindDummyItem()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("Id");
    dummy.Columns.Add("Name");
    dummy.Columns.Add("Url");
    int count = dlImages.RepeatColumns == 0 ? 1 : dlImages.RepeatColumns;
    for (int i = 0; i < count; i++)
    {
        dummy.Rows.Add();
    }
    dlImages.DataSource = dummy;
    dlImages.DataBind();
}

[WebMethod]
public static string GetImages(int pageIndex, int categoryId)
{
    return GetImagesData(pageIndex, categoryId).GetXml();
}

public static DataSet GetImagesData(int pageIndex, int categoryId)
{
    int pageSize = 9;
    string query = "[GetImagesPageWiseBasedOnCategoryId]";
    SqlCommand cmd = new SqlCommand(query);
    cmd.CommandType = CommandType.StoredProcedure;
    if (categoryId > 0)
    {
        cmd.Parameters.AddWithValue("@CategoryId", categoryId);
    }
    cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
    cmd.Parameters.AddWithValue("@PageSize", pageSize);
    cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
    return GetData(cmd);
}

private static DataSet GetData(SqlCommand cmd)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlDataAdapter sda = new SqlDataAdapter())
        {
            cmd.Connection = con;
            sda.SelectCommand = cmd;
            using (DataSet ds = new DataSet())
            {
                sda.Fill(ds, "Images");
                DataTable dt = new DataTable("PageCount");
                dt.Columns.Add("PageCount");
                dt.Rows.Add();
                dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
                ds.Tables.Add(dt);
                return ds;
            }
        }
    }
}

VB

Protected Sub Page_Load(sender As Object, e As EventArgs)
	If Not IsPostBack Then
		Me.BindDummyItem()
	End If
End Sub

Private Sub BindDummyItem()
	Dim dummy As New DataTable()
	dummy.Columns.Add("Id")
	dummy.Columns.Add("Name")
	dummy.Columns.Add("Url")
	Dim count As Integer = If(dlImages.RepeatColumns = 0, 1, dlImages.RepeatColumns)
	For i As Integer = 0 To count - 1
		dummy.Rows.Add()
	Next
	dlImages.DataSource = dummy
	dlImages.DataBind()
End Sub

<WebMethod> _
Public Shared Function GetImages(pageIndex As Integer, categoryId As Integer) As String
	Return GetImagesData(pageIndex, categoryId).GetXml()
End Function

Public Shared Function GetImagesData(pageIndex As Integer, categoryId As Integer) As DataSet
	Dim pageSize As Integer = 9
	Dim query As String = "[GetImagesPageWiseBasedOnCategoryId]"
	Dim cmd As New SqlCommand(query)
	cmd.CommandType = CommandType.StoredProcedure
	If categoryId > 0 Then
		cmd.Parameters.AddWithValue("@CategoryId", categoryId)
	End If
	cmd.Parameters.AddWithValue("@PageIndex", pageIndex)
	cmd.Parameters.AddWithValue("@PageSize", pageSize)
	cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output
	Return GetData(cmd)
End Function

Private Shared Function GetData(cmd As SqlCommand) As DataSet
	Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
	Using con As New SqlConnection(strConnString)
		Using sda As New SqlDataAdapter()
			cmd.Connection = con
			sda.SelectCommand = cmd
			Using ds As New DataSet()
				sda.Fill(ds, "Images")
				Dim dt As New DataTable("PageCount")
				dt.Columns.Add("PageCount")
				dt.Rows.Add()
				dt.Rows(0)(0) = cmd.Parameters("@PageCount").Value
				ds.Tables.Add(dt)
				Return ds
			End Using
		End Using
	End Using
End Function

SQL

CREATE PROCEDURE [GetImagesPageWiseBasedOnCategoryId]
	@CategoryId INT = NULL
   ,@PageIndex INT = 1
   ,@PageSize INT = 3
   ,@PageCount INT OUTPUT
AS
BEGIN
      SET NOCOUNT ON;
 
    SELECT ROW_NUMBER() OVER
            (
                  ORDER BY [Id] ASC
            )AS RowNumber
      ,Id
       ,Name
      ,Url
    INTO #Results
    FROM [Images]
	WHERE CategoryId = @CategoryId OR  @CategoryId IS NULL
 
      DECLARE @RecordCount INT
    SELECT @RecordCount = COUNT(*) FROM #Results
 
      SET @PageCount = CEILING(CAST(@RecordCount AS DECIMAL(10, 2)) / CAST(@PageSize AS DECIMAL(10, 2)))
    PRINT       @PageCount
          
    SELECT * FROM #Results
    WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
    
    DROP TABLE #Results
END

Screenshot