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.