| Код |
<!DOCTYPE html> <!-- мы же html5 используем да? -->
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <!-- на ваш вкус -->
<script type="text/javascript" src="https://raw.github.com/desandro/imagesloaded/master/jquery.imagesloaded.min.js"></script> <!-- IE не проглотит, лучше из локального места -->
<style>
<!-- нужно же показать, где границы дива -->
.photo_list {
border: 2px solid blue;
width: 520px;
overflow: hidden;
}
</style>
<script>
(function(){
var imgList; // div.photo_list
function resizeImages() {
var height = 0, width = 0, SPACING = 6; // SPACING - расстояние между картинками в пикселях
/*
Пусть у нас есть прямоугольник с измерениями width,height.
Ставим в него картинки одну за другой, пропорционально растягивая их до одной высоты (наибольшей)
Обрабатываем картинку за картинкой
пусть w,h - измерения текущего изображения
если высота (h) больше общей высоты (height), сохраняем новое значение,
увеличиваем общую длину (width) во столько же раз, на сколько h больше height и
прибавляем w
если высота (h) меньше общей высоты (heigth), увеличиваем w во столько же раз, на сколько h
меньше height и прибавляем к width
*/
this.each(function(){
var h = $(this).height(),
w = $(this).width(),
k = height ? (height / h) : 1;
height = Math.max(h, height);
width = (height > h) ? (w * k + width) : (w + width / k);
});
// расчитываем коэфициент разницы между width и нужной нам длиной (с учетом отступов)
var k = width / (imgList.width() - (this.size()-1) * SPACING);
height /= k; // нам важна только высота
// применяем новые размеры к каждому изображению, примерно по той же схеме
this.each(function(){
var h = $(this).height(),
w = $(this).width(),
ik = height / h;
$(this).height(height);
$(this).width((h >= height) ? (w * ik) : (w / ik));
});
// любому непоследнему изображению добавляем отступы с правой стороны
this.not(':last').css('margin-right', SPACING + 'px');
// устанавливаем высотку контейнеру
imgList.height(height);
}
$('document').ready(function(){
imgList = $('.photo_list'); // div.photo_list
imgList.find('img').imagesLoaded(resizeImages); // крупим callback на полную загрузку изображений
});
})();
</script>
</head>
<body>
<!-- изображения должны идти пез пробелов и разрывов строк, а то браузер поставит пробелы между картинками -->
<div class="photo_list">
<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.jpg"/>
</div>
</body>
</html>
|
Как-то так... не забывайте, что document.read выполнится раньше загрузки изображений (если они не в кэше), а значит их высота и длина не будут известны на время выполнения функции. (https://github.com/desandro/imagesloaded)
Сам скрипт кстати не намного больше чем ваш, кол-во строк даже одинаково 
| Код |
(function(){
var imgList;
function resizeImages() {
var height = 0, width = 0, SPACING = 6;
this.each(function(){
var h = $(this).height(),
w = $(this).width(),
k = height ? (height / h) : 1;
height = Math.max(h, height);
width = (height > h) ? (w * k + width) : (w + width / k);
});
var k = width / (imgList.width() - (this.size()-1) * SPACING);
height /= k;
this.each(function(){
var h = $(this).height(),
w = $(this).width(),
ik = height / h;
$(this).height(height);
$(this).width((h >= height) ? (w * ik) : (w / ik));
});
this.not(':last').css('margin-right', SPACING + 'px');
imgList.height(height);
}
$('document').ready(function(){
imgList = $('.photo_list');
imgList.find('img').imagesLoaded(resizeImages);
});
})();
|
|