基于来自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，胡子等实现这一目标

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)