在HTML网页上动态填充砌体视图

wwwo4jvm  于 2023-08-01  发布在  其他
关注(0)|答案(1)|浏览(108)

我在一个简单的网络项目工作,并希望包括一个主页图像砖石视图。
我计划在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;
}


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

dnph8jn4

dnph8jn41#

如果你想要一个简单的解决方案,只需在JavaScript中有一个硬编码的图像URL数组,并使用它来动态生成页面。

const getRandomInt = (min, max) => {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min) + min);
}
const a = [
  'https://picsum.photos/id/91/300',
  'https://picsum.photos/id/92/300',
  'https://picsum.photos/id/93/300',
  'https://picsum.photos/id/94/300',
  'https://picsum.photos/id/95/300',
  'https://picsum.photos/id/96/300',
  'https://picsum.photos/id/98/300',
  'https://picsum.photos/id/99/300',
  'https://picsum.photos/id/100/300',
]
const b = a.map(i => `${i}/${getRandomInt(300,400)}`)
document.querySelector('.masonry').innerHTML = b.map(s => `<img src=${s}>`).join('')
.masonry {
  column-count: 3;
  gap: 16px;
}
.masonry img {
  display: block;
  width: 100%;
  margin-bottom: 16px;
}
<div class="masonry"></div>

相关问题