Стояла задача для своего фото - сайта сделать вывод картинок по типу коллажа. В сети нарыл простой скрипт, но он и масса других вариантов сталкивают меня с одной проблемой.
Картинки "растягиваются" и не сохраняют своих размеров. Если обновить страницу все встает на свои места. Проблема появляется время от времени, не могу разобраться в чем беда, вот сам скрипт, посмотрите, пожалуйста, в чем может быть причина.
HTML:
<div id="collage" class="clear"><img scr="pics.jpg" /></div>
Стили:
#collage {width: 717px;}
#collage img {display: block; float: left;}
.clear:before,
.clear:after {display: table; content: ""; line-height: 0;}
.clear:after {clear: both;}
Скрипт:
<script type="text/javascript">
var collage = document.getElementById('collage');
var images = collage.getElementsByTagName('img');
//Маленький набор опций: averageRowHeight - примерная высота строки; gap - отступы между картинками;
var options = {averageRowHeight: 300, gap: 7};
var widths = [], rows = [], rowNumber = 0, index = 0, k = 0;
//Записываем в массив ширину каждой картинки при одинаковой высоте
for(var i = 0; i < images.length; i++){
widths.push(Math.round(images[i].width / images[i].height * options.averageRowHeight));
}
//Функция суммы элементов массива
Array.prototype.sum = function(){
return this.reduce( function(prev,current){ return +current + prev; }, 0);
}
//Разбиение оизображений на строки обичным деление общей ширины всех картинок на ширину контейнера
while(rowNumber < Math.ceil(widths.sum() / collage.clientWidth)){
rows[rowNumber] = [];
//Как только общая ширина картинок превысила ширину контейнера переходим на следующую строку
while(index < widths.length && rows[rowNumber].sum()+(rows[rowNumber].length * options.gap) < collage.clientWidth + options.gap){
rows[rowNumber].push(widths[index]);
index++;
//Если на последнюю строку осталось одно изображение, то дописываем его в "предпоследнюю"
if(index == widths.length - 1){
rows[rowNumber].push(widths[index]);
rowNumber++;
break;
}
}
rowNumber++;
}
index = 0;
//Непосредственно изменение масштаба картинок (пропорционально, без обрезания изображений)
for(var i = 0; i < rows.length; i++){
for(var j = 0; j < rows[i].length; j++){
// Если ширина строки больше/меньше ширины контейнера - соответственно
// уменьшаем/увеличиваем до ширины контейнера с учетем отступов между картинками
k = (collage.clientWidth - ((rows[i].length - 1) * options.gap)) / rows[i].sum();
images[index].style.width = rows[i][j] * k + 'px';
images[index].style.height = k * options.averageRowHeight + 'px';
if(j < rows[i].length - 1) images[index].style.marginRight = options.gap + 'px';
if(i < rows.length - 1) images[index].style.marginBottom = options.gap + 'px';
index++;
}
}
</script>
