JavaScript:显示未知数量的磁贴的逻辑

时间:2016-02-02 19:44:47

标签: javascript jquery html css twitter-bootstrap

我有一种情况,我得到4,5或6张图像/图块。 根据图块的数量,我需要格式化网页上的图像。 像这样http://prntscr.com/9y75dw

如果它是五张图像,我必须以第一行中的两个图像和第二行中的三个图像的方式对其进行格式化。你能帮我解释一下这个逻辑吗?

1 个答案:

答案 0 :(得分:2)

嗯,我没有看到一种技术,也许我错过了更合适或通用的方式,但由于较少的描述和给定的图像数是随机的,我不知道这将如何工作。

var imageLength = $('img').length;
var newLength = 0, differenceLength=0;

if(imageLength%2==0){
  //incase of even number
  //Do what you like here eg: $('img').css('width', '50%');
}
else{
  // incase of odd number 
  newLength = Math.round(imageLength/2);  //dividing number into two parts.
  differenceLength = imageLength - newLength; //difference to put smaller above and greater below.
  $('parent-div img:nth-child(1)').nextUntil('img:nth-child('+differenceLength+')').wrapAll('<div></div>') //wraps into a container div
}

虽然这只是一种方式。你现在可能已经意识到很多逻辑。

PS: 我已随机编写此代码,因此请将其作为逻辑帮助。不确定这是否有效。