我正在使用jQuery插件“ photoset-grid”来创建图像的photoset。
这是插件的链接：
http://stylehatch.github.io/photoset-grid/
$('.photoset-grid').photosetGrid({
layout: '132',
width: '90%',
gutter: '4px'
});
<div class="photoset-grid">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
</div>
上面的代码根据分配给布局的值创建图像的布局
layout: "132"第一行包含1张图像，第二行包含3张图像，第三行包含2张图像。我担心的是，我正在以此为所有人的标准
<div class="photoset-grid">，并且每组图像的数量各不相同，我如何创建基于图像总数的函数或方程式，例如5幅图像返回适合图像总数的随机布局layout: "122" 最佳答案
编辑-由于图像是由用户动态添加的...
我为您制作了一个入门演示，以表明我之前的回答还不错。
但是要重新实例化photosetGrid，可悲的是，您必须将其丢弃。
（使用.remove()，然后使用.clone()包含图片的未实例化的div）。
这只是一个入门，您必须学习...
尝试一下。
我不会免费创建符合您口味的完整功能。
看看这个CodePen。
我强烈建议您挤压显示面板以查看动态添加的所有图像。
我不会在这里复制代码...
由于这是使用先前答案的不完美演示。
如果您全力以赴，则应该明白。
该代码是很好的注释，我离开了我的调试console.log()。
;）
您可以使用data属性，并使用.each()来不同地初始化它们。
（这将为您节省数学！）
像这样：
$('.photoset-grid').each(function(){
$(this).photosetGrid({
layout: $(this).data("layout"),
width: '90%',
gutter: '4px'
});
});
<!-- One layout for 6 images -->
<div class="photoset-grid" data-layout="132">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
</div>
<!-- Another layout for 6 images -->
<div class="photoset-grid" data-layout="222">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/6.jpg">
</div>
<!-- one layout for 4 images -->
<div class="photoset-grid" data-layout="13">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
</div>