Javascript 基于JSON中的图像数组设置图像样式

我正试图编写代码来显示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等实现这一点吗？

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

一旦您知道了列的数量，获得行的数量就只需要进行除法和取整

var numb = obj.images.length;

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

将其更改为宽度很容易

var numb = obj.images.length;

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

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

---

如果屏幕宽度下降得很小（例如，在iPhone上），会发生什么情况？每个图像是否应该继续只占页面宽度的33%？@vamshi如果有8个图像，那么应该是什么？3,3,2或2,2,2，2@jsve在这种情况下，图像将采用100%的宽度。@mmuzahid 8图像在这里不是这样的。只需要处理4、5或6个