javascript - 为 photoset-grid 创建布局的数学方程

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)。

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

看看这个 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>