Creating Pinterest like layout in ASP.NET webform

Question

I am creating a Pinterest like layout in ASP.NET webform and I followed following two tutorials

• Creating Pinetrest like Layout in ASP.NET
• How to use Masonry

However, I made changes in the first tutorial based on second and I am getting below output

Clearly, this isn't what I was looking. The gap between two rows and columns is high.

Below is my code:

<

style type="text/css">
        body
        {
            background-color:#EEEEEE;
        }
        #imgLoad
        {
            position:fixed;
            bottom:0;   
            left:40%;
            display:none;
        }
               .item {
  width: 220px;
  margin: 10px;
  float: left;
  background-color:honeydew;
}
    </style>


 <div id="container" class="transitions-enabled infinite-scroll clearfix">
       <asp:Repeater ID="Repeater1" runat="server">
           <ItemTemplate>
               <div class="item">
                   <img src="<%# Eval("Url") %>" />
                   <p><%# Eval("Description") %></p>
               </div>
           </ItemTemplate>
       </asp:Repeater>
   </div>

How do I fix it? I believe this is related to the height, may be the row height of repeater control takes the highest among the column.

I did tried to do it with ASp.NET MVC

Controller

IEnumerable<Product> model = ProductRepository.GetData(1, 25);

            return View(model);

View

  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">


        .item {
  width: 220px;
  margin: 5px;
  float: left;
  background-color:honeydew;
}

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script src="Scripts/Mansory.js" type="text/javascript"></script>
    <script type="text/javascript">
        var $container = $('#container');

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

    </script>




@foreach (var item in Model) {

     <div class="item">

        <img src="@(item.Url)" />
                  @Html.DisplayFor(modelItem => item.Description)
    </div>


}

but same result

EDIT 1 I have changed my script to

<script type="text/javascript">
        $(function () {
            var $container = $('#container');

            $container.masonry({
                itemSelector: '.item',
                columnWidth: 240,
                isAnimated: false
            });
        });


    </script>

and code to

@foreach (var item in Model) {
    <div id="container">
     <div class="item">

        <img src="@(item.Url)" />
                  @Html.DisplayFor(modelItem => item.Description)
    </div>

</div>
}

but same result

Answer 1

Ok, a few things:

• You have spelled "Masonry" wrong when initializing the script
• Put a div with Id "container" around your items list
• In stead of using $container.imagesLoaded make the whole javascript section run when page is loaded

Like this:

$(function(){ 
    var $container = $('#container');

    $container.masonry({
            itemSelector: '.item',
            columnWidth: 240,
            isAnimated: false
    });
});

Then it should work.

Answer 2

This is small library which implements Pinterest layout. Filling the grid goes from left to right. Count of columns can be customized in config for each resolution. Columns adaptive changes on resize. Image can be at up or down of pin.

https://github.com/yury-egorenkov/pins-grid