ASP.NET: Responsive GapFree MultiColumn Grids using Nested.js




MultiColumn Dynamic Grid Layouts are very popular nowadays and Pinterest, the fastest growing social network is a familiar real time example of the same. There are many jQuery plugins available for creating such layouts starting from the jQuery Masonry plugin.

Recently, I discovered the existence of a new dynamic grid plugin called Nested developed by Jonas Blomdin that can be used to create a gap free, responsive dynamic grid layout. He had explained clearly how this plugin is different from the established masonry plugin here and that is the reason why I chose the Nested jQuery plugin along with FancyBox jQuery Plugin to create an image portfolio that consists of responsive multicolumn image grids. In this post, I am going to explain how to create responsive multicolumn dynamic grids in ASP.NET using Nested.js plugin.

There are three things that this plugin do,

  • Creates a matrix of all elements and creates a multi column grid.
  • Scans the matrix for gaps and tries to fill them by re-ordering the elements.
  • Resize any element at the bottom of the grid that is bigger (or smaller) than the gap to make the grid completely gap-free.

Steps to follow to implement this,

1. Download Nested jQuery plugin from here.

2. Add the jQuery.nested.js and style.css file from the download to your asp.net project.

3. We are going to display images of varying size using Repeater control. In this scenario, there are two parameters that is required for each grid, one is the value for image source, and the other is the cssclass for each grid.

To understand this let us see how it works in simple html. Each grid item should use css class as explained below,

<div id="container">
  <div class="box size11"></div>
  <div class="box size12"></div>
  <div class="box size21"></div>
  <div class="box size22"></div>
  ...
</div>

Sizing of items are handled by adding sizeWH where W is the number of columns the box shall use and H is the number of rows the box shall use. For example, size12 equals to 1 column and 2 rows, to display an image in this grid, the image should be of 50 X 100 in size.

The base column and row size is set by minWidth option and default is 50. This option can be changed anytime using,

$("#container").nested({minWidth: 100});
To implement the same in asp.net, copy and paste the below code in .aspx file. Make sure you have included the necessary script and css files mentioned in point 1. I have used 27 images in various sizes as explained above to create this portfolio, for example size11 - 50 X 50, size 21- 100 X 50. etc. You can use images or any other content, such as text, buttons and other controls as content for the grid.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Responsive MultiColumn Grid Example</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="jquery.nested.js" type="text/javascript"></script>
    <script type="text/javascript" >
     $(function() {     
       $('#container').nested(); 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
               <div class="<%#Eval("CssClassVal")%>">
                   <img src="<%# Eval("SmallUrl")%>" alt="" />                   
               </div>            
           </ItemTemplate>
        </asp:Repeater>
    </div>
    </form>
</body>
</html>

4. Use the below code in the code-behind page, here I am building a list that consists of information required for rendering the image such as the size of the image to be supplied to css class, (eg. 11,21.etc) and the path of image to be used by the src attribute. I have stored all images in Images/images_small folder and followed the same naming convention for all the images as in 'img_x.jpg', x starting from 1 to 27.


public class ImageAttributes
    {
        public string SmallUrl { get; set; }
        public string CssClassVal { get; set; }
    }

    public static class PopulateRepeater
    {
        static List<ImageAttributes> objList;
        public static IEnumerable<ImageAttributes> GetData()
        {
            ImageAttributes obj;
            objList = new List<ImageAttributes>();
            //Image size for each image used in the project eg. size53 - 250x150 px
            int[] csssize = new int[]{53,42,34,11,22,45,43,24,37,32,53,23,12,21,23,22,11,
                64,11,12,23,22,11,21,12,11,11};
            for (int i = 1; i <=27; i++)
            {
                obj = new ImageAttributes();
                obj.SmallUrl = String.Format("Images/images_small/img_{0}.jpg",i);                          int size=csssize[i-1];
                obj.CssClassVal = String.Format("box size{0}",size);
                objList.Add(obj);
            }
            return objList;
        }

5. Bind Repeater control with values from PopulateRepeater Class in Page load method as shown below,


     protected void Page_Load(object sender, EventArgs e)
        {
            Repeater1.DataSource = PopulateRepeater.GetData();
            Repeater1.DataBind();
        }

6. That is all, now build the project and open .aspx file in the browser to see the results. Resize browser window to know how the image grids re-align automatically according to the window size.




Caution:

There is a bug in this plug-in that causes the browsers to freeze due to an infinite loop when the viewport is reduced to less than the size of the widest element in the grid. There is a local fix available here. So whenever you use the jquery.nested.js file, make sure you edit the _renderGrid() method in it as mentioned in the issues page.


Please leave your comments and queries about this post in the comment sections in order for me to improve my writing skills and to showcase more useful posts. Thanks for reading!!




Subscribe to GET LATEST ARTICLES!


advertise here

Related

Responsive Design 3392651454871117275

Post a Comment

emo-but-icon

Currency Converter

Built using AngularJS and ASP.NET Web API

SPONSORED

SUBSCRIBE


item