基于来自 JSON 的图像数组样式化图像答案

【问题标题】：Styling Images based on array of images from JSON基于来自 JSON 的图像数组样式化图像
【发布时间】：2016-05-12 03:52:40
【问题描述】：

我正在尝试编写代码以在 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 等实现这个吗？？？

【问题讨论】：

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

标签： javascript jquery html css json

【解决方案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)

【讨论】：