C# webform - Show images in masonry layout

Question

I am using asp.net web form (without mvc) with c#. I am trying to show images through masonry layout and imagesLoaded and to start with I have written the following code:

    <script src="../Plugins/masonry/masonry.pkgd.min.js"></script>
    <script src="../Plugins/masonry/imagesloaded.pkgd.min.js"></script>
    <style>
        .grid-item { width: 200px;  background-color: gray;
    }
        .grid-item--width2 { width: 400px; }

    </style>
    <script>
        $('.grid').masonry({
            // options
            itemSelector: '.grid-item',
            columnWidth: 200
        });

    </script>

    <div class="grid">
      <div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
      <div class="grid-item grid-item--width2"><img src="images/Chrysanthemum20180717094352440.jpg" /></div>
      <div class="grid-item"><img src="images/Chrysanthemum20180717094352440.jpg" /></div> 
    </div>

When I run this I see three large images. I am not able to understand how all this works. I would be getting image src in my c# code so how do I bind it here and ensure that it renders as per masonry layout and show the images.

i would appreciate if someone could please suggest an example where either json is used or through code behind how can I create this image gallery.