C＃Webform-以砖石布局显示图像

Question

我在c＃中使用asp.net Web表单（无mvc）。我试图通过砌体布局和imagesLoaded显示图像，并首先编写了以下代码：

    <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>

运行此命令时，我会看到三个大图像。我无法理解所有这些工作原理。我将在我的C＃代码中获取图像src，因此如何在此处绑定它并确保其按照砌体布局呈现并显示图像。

如果有人可以提出一个使用json或通过如何创建此图片库的代码的示例，我将不胜感激。