用于创建照片集网格布局的数学方程式

Question

我正在使用jQuery插件'photoset-grid'来创建图像的照片集。
这是插件的链接： 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

行有 1 张图像，第 2 行有 3 张图像，第 3 行有 2 张图像。我担心的是我将其用作所有人的标准<div class="photoset-grid">并且每组图像的数量不同，我如何创建一个基于图像总数的函数或方程，例如 5 张图像返回适合图像总数的随机布局layout: "122"

Answer 1

编辑-- 由于图像是由用户动态添加的...我


给你做了一个入门演示，以表明我之前的答案一点也不差。
但是要重新实例化photosetGrid，可悲的是...你必须把它扔掉。
(使用.remove()，然后.clone()包含图片的未实例化div)。

这只是您必须学习的入门课程...
并尝试一些东西。
我不会免费创建符合您口味的完整功能。

看看这个代码笔。
我强烈建议您挤压显示面板以查看动态添加的所有图像。

我不会在这里复制代码...
由于这是一个使用上一个答案的不完美的演示。
如果你付出努力，你应该得到这个想法。
代码注释很好，我把调试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>