Create A Masonry Image Gallery In ASP.NET

Image gallery is what we often see on sites, and I personally like the masonry image gallery. I thought to create it and when I saw the demo I didn't get the idea at first. How could I create this div position randomly, as fitting with each other seems to be impossible without CSS or jQuery. I thought I would have to use a jQuery plugin for this, then an idea came in my mind: Why div?

We just need the output, so why shouldn't I do this with a table? We can do this in div also but I am not too good in CSS, so I preferred a table.

Here's the image and code of the aspx page,

Image Aspx Page

Aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.inner-tr td {
vertical-align: top;
}
.one-tiles {
height: 170px !important;
background-color: #d77575;
}
.two-tiles {
height: 130px !important;
background-color: #dcbc4c;
}
.three-tiles {
background-color: #a3ca3b;
height: 300px !important;
}
.four-tiles {
background-color: #3daee3;
height: 150px !important;
}
.five-tiles {
background-color: #bb8ed8;
height: 270px !important;
}
.six-tiles {
background-color: #baafb1;
height: 230px !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="divmain" runat="server" class="box">
</div>
</form>
</body>
</html>

I shared the .aspx page code above, we created six classes with different heights and background colors. I took a div, gave an id and made it runnable at the server side by giving runat="server", so that we can access this at code behind.

Code Behind

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Default2: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
String strGallery = String.Empty;
strGallery = strGallery + "<table style='width:100%;height:800px; border-collapse: collapse;'><tr>";
for (Int32 i = 0; i < 5; i++)
{
strGallery = strGallery + "<td style='vertical-align: top;'><table style='width:100%;' cellspacing='1'>";
for (Int32 j = 0; j <= 5; j++)
{
Thread.Sleep(10);
Int32 rndnumber = RandomNumber();
String ClassName = String.Empty;
if (rndnumber == 1)
{
ClassName = "one-tiles";
}
else if (rndnumber == 2)
{
ClassName = "two-tiles";
}
else if (rndnumber == 3)
{
ClassName = "three-tiles";
}
else if (rndnumber == 4)
{
ClassName = "four-tiles";
}
else if (rndnumber == 5)
{
ClassName = "five-tiles";
}
else
{
ClassName = "six-tiles";
}
strGallery = strGallery + "<tr class='inner-tr'><td class='" + ClassName + "'></td></tr>";
}
strGallery = strGallery + "</table></td>";
}
strGallery = strGallery + "</tr></table>";
divmain.InnerHtml = strGallery;
}
public Int32 RandomNumber()
{
Random _r = new Random();
Int32 number = _r.Next(1, 7);
return number;
}
}

Description

In the above code we did the logic for the image gallery. We are generating a dynamic html table here and putting this in a string. We have taken two loops out here, the outer one for the number of columns we want to show in the page and the inner one for the number of rows we want in image gallery.

We created a random number generator function, which will generate a number between 1 to 6 and place class randomly according to random number through an if else condition, each time a random number will come, so we basically don't know what number will come but we know the number will be between 1 to 6 and we have logic for that. And at last we placed this within a div which we made runnable at server. Now our code is done and when we run the application it will generate the output like this,

You can place images in it, for now I am just giving the background color. Each time page refreshes, the random box position will be visible.