2016-02-02 2 views
0

У меня есть ситуация, когда я получаю 4, 5 или 6 изображений/плиток. В зависимости от количества плиток мне нужно отформатировать изображения на веб-странице. http://prntscr.com/9y75dwJavaScript: логика для отображения неизвестного количества плиток

Если это пять изображений, я должен отформатировать его таким образом, чтобы два изображения в первой строке и три изображения во второй строке. Можете ли вы помочь мне с логикой?

+0

Как вы получаете изображения? –

+0

JSON, от CMS. –

+0

Можете ли вы использовать PHP? –

ответ

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:Я случайно написал этот код, поэтому рассмотрим его как логику помощи. Не уверен, что это сработает.

Смежные вопросы