c# - 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 或通过代码背后的代码如何创建此图片库的示例，我将不胜感激。