Using these two links i have solved this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.loader
{
height: 50px;
width: 100px;
}
.item
{
width: 202px;
border: 1px solid #ccc;
box-shadow: 2px 2px 8px 2px #ccc;
}
.item .header
{
height: 30px;
background-color: #9F9F9F;
color: #fff;
}
.item .body
{
width: 200px;
height: 200px;
}
.item .image
{
height: 200px;
width: 200px;
}
.item .footer
{
height: 50px;
}
.button, .button:hover
{
height: 45px;
padding: 10px;
color: White;
line-height: 23px;
text-align: center;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
text-decoration: none;
background-color: #9F9F9F;
border: 1px solid #5C5C5C;
}
</style>
<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();
}
});
$(function () {
GetRecords();
});
function GetRecords() {
pageIndex++;
if (pageIndex == 1 || pageIndex <= pageCount) {
$("#loader").show();
$.ajax({
type: "POST",
url: "CS.aspx/GetImages",
data: '{pageIndex: ' + pageIndex + '}',
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 = 3;
var rowCount = Math.ceil(images.length / repeatColumns);
var j = 0;
images.each(function () {
var image = $(this);
var row = $(".mainTable .item:last").closest("tr");
if ($(".is_used[value='1']", row).length == repeatColumns) {
row = $(".mainTable tr").eq(0).clone();
$(".is_used", row).val("0");
$(".image", row).attr("src", "");
$(".button", row).attr("href", "");
$(".loader", row).remove();
$(".mainTable").append(row);
j = 0;
} else {
row = $(".mainTable .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++;
});
$(".mainTable .is_used[value='0']").closest(".item").remove();
}
</script>
</head>
<body style="font-family: Arial; font-size: 10pt">
<form id="form1" runat="server">
<asp:ListView ID="lvImages" runat="server" GroupItemCount="3" GroupPlaceholderID="groupPlaceHolder1"
ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table class="mainTable">
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<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>
</td>
</ItemTemplate>
</asp:ListView>
</form>
</body>
</html>
You need to change this function in C# other code will remain the same.
C#
private void BindDummyItem()
{
DataTable dummy = new DataTable();
dummy.Columns.Add("Id");
dummy.Columns.Add("Name");
dummy.Columns.Add("Url");
int count = 3;
for (int i = 0; i < count; i++)
{
dummy.Rows.Add();
}
lvImages.DataSource = dummy;
lvImages.DataBind();
}
Kindly download the sample from the second link and replace the HTML code and the above only function in C#.
Screenshot
