我在一个简单的网络项目工作，并希望包括一个主页图像砖石视图。
我计划在Azure上托管此页面，使用blob存储图像。我的计划是将砖石视图的图像存储在一个subDir中--让我们称之为“masonryImages”，在那里我可以随意删除/添加图像，这将反映在HTML页面上。
我想做的是
1.指向HTML页图像的源文件夹。
1.循环通过此文件夹到。确定砖石结构视图中应该有多少图像（预期〜 50），以及b.创建图像源的阵列。
1.使用这些图像的.count和.src动态填充HTML页面，而不是硬编码每个方面。
我一直在测试一个基本的砖石视图：

<div class="masonry">
            <div class="mItem">
                <img src="https://source.unsplash.com/random/300">
            </div>

            <div class="mItem">
                <img src="https://source.unsplash.com/random/100">
            </div>

            <div class="mItem">
                <img src="https://source.unsplash.com/random/50">
            </div>

            <div class="mItem">
                <img src="https://source.unsplash.com/random/600">
            </div>
 </div>

字符串
用于CSS（& F）

.masonry {
   column-count: 5;
   column-gap: 16px;
}

型
我的问题是
我如何能动态地创建对象在砖石视图依赖于两个图像的数量在源文件夹中，也显示所有的图像，利用他们的文件夹索引。