javascript - 基于来自 JSON 的图像数组设置图像样式

Question

我正在尝试编写代码以在 JSON 文件中显示来自 CMS 的图像。

JSON 文件应该是这样的

{  
 "images": [
  {"title": "Image One", "url": "image1.jpg"},
  {"title": "Image Two", "url": "image2.jpg"},
  {"title": "Image Three", "url": "image3.jpg"},
  {"title": "Image Four", "url": "image4.jpg"},
  {"title": "Image Five", "url": "image5.jpg"}
 ]
}

HTML 应该是这样的

<ul id="mylist"></ul>

正在加载的图像数量是动态的。它可以是 3、4 或 5 中的任何一个。以下是每个布局的外观。

• 对于三张图片，每张图片应占宽度的 33%
• 对于四张图片，每张图片应占宽度的 50%，分两行
• 五张图片，上面三张，每张占33%，第二行剩下两张分别占33%和33%。

有谁知道如何使用 JavaScript、jQuery、mustache 等实现这一点？？？

Answer 1

这听起来像是基础数学，如果你有偶数个图像，你需要两列，如果你有奇数个图像，你需要三列。

一旦知道了列数，得到行数就是除法和四舍五入的问题了

var numb = obj.images.length;

var cols = numb % 2 === 0 ? 2 : 3;
var rows = Math.ceil(numb / cols);

FIDDLE

将其更改为宽度很容易

var numb = obj.images.length;

var width = numb % 2 === 0 ? '50%' : '33%';

$('.images').css('width', width)