[Математика] Как расположить картинки в HTML в 2 ряда ?

[vaf]

Доброго времени суток уважаемые форумчане. Всех с прошедшим новым годом, рождеством и наступающим старым. У меня очередная (пока для меня не разрешимая) проблема
В общем суть в следующем. Задумал я сделать скрипт который бы мне вписывал все картинки в определенную ширину, при этом чтобы высота у них была одинаковая, т.е. красивое расположение картинок в один ряд.
Как я решил эту задачу: Допустим есть массив из нескольких картинок разного размера. Нужно все их в вписать в нужную нам ширину, а чтобы не получился забор, нужно чтобы высота всех была одинаковая.
Делал я это так. С помощью _GDIPlus_ImageGetDimension я узнавал ширину и высоту каждой картинки в массиве. Далее в цикле от 1 и до тех пор пока общая ширина не будет равна нужной, я прибавлял высоту всех картинок и высчитывал полученную ширину
как только общая ширина равнялась нужной мне, я делал выход из цикла, а текущее значение цикла и было нужной мне высотой.
потом формировал HTML сроку, к примеру

<a href="http://site.ru/wp-content/uploads/_iyltz-fmg0.jpg"><img class="alignright" title="_iyltz-fmg0.jpg" src="/wp-content/uploads/_iyltz-fmg0.jpg" alt="" height="52" /></a><a href="http://site.ru/wp-content/uploads/qepeet1a8nq.jpg"><img class="alignright" title="qepeet1a8nq.jpg" src="/wp-content/uploads/qepeet1a8nq.jpg" alt="" height="52" /></a><a href="http://site.ru/wp-content/uploads/hizj9fz-iqk.jpg"><img class="alignright" title="hizj9fz-iqk.jpg" src="/wp-content/uploads/hizj9fz-iqk.jpg" alt="" height="52" /></a><a href="http://site.ru/wp-content/uploads/rfhkc-5lfre.jpg"><img class="alignright" title="rfhkc-5lfre.jpg" src="/wp-content/uploads/rfhkc-5lfre.jpg" alt="" height="52" /></a><a href="http://site.ru/wp-content/uploads/vrba-s9swpi.jpg"><img class="alignright" title="vrba-s9swpi.jpg" src="/wp-content/uploads/vrba-s9swpi.jpg" alt="" height="52" /></a><a href="http://site.ru/wp-content/uploads/cdyrhlfohd4.jpg"><img class="alignright" title="cdyrhlfohd4.jpg" src="/wp-content/uploads/cdyrhlfohd4.jpg" alt="" height="52" /></a>

где 52 как раз и есть высчитанное значение.
Все бы хорошо, если этих картинок от 1 до 4 или 5, но если их 7,8, 9 или 10 то они получались слишком мелкие. И вот теперь передо мной стоит задача. Если картинок больше 5, пусть они будут в два ряда, так же с одинаковой высотой в каждом ряду и вписанные в общую ширину.
Вот часть скрипта которая отвечает за вывод картинок в одну линию.

На входе $1 - Массив из имен всех картинок
$width - ширина в которую будем вписывать все картинки
На выходе: $y - общая высота для всех картинок.

$1 = _StringBetween($post_text,'title="','" src') ; Заносим в массив имена всех картинок
   
   $width = 600
	  
   _GDIPlus_Startup()
   For $y = 1 To 250 ; Цикл на высоту от 1 до 250 точек (чтобы максимальная высота не превышала 250 точек)
	  $tmp = 0
	  For $i = 0 To UBound ($1) - 1 ; Цикл на все картинки
		 $hImage = _GDIPlus_ImageLoadFromFile($Path & $1[$i]) ; Получаем ID картинки
		 $aSize = _GDIPlus_ImageGetDimension($hImage) ; Получаем высоту и ширину картинки $aSize[0], $aSize[1]
		 If Not IsArray ($aSize) Then
			MsgBox (4096, "Ошибка")
			Exit
		 EndIf
			
		 $nx = Floor (resize ($aSize[0], $aSize[1], $y)) ; Получаем ширину изображения для высоты Y
		 $tmp = $tmp + $nx
		 _GDIPlus_ImageDispose($hImage)
	  Next
	  If $tmp >= $width Then ExitLoop ; Если общая ширина картинок >= ширине сайта, выходим из цикла. $y = высота картинок
   Next
   _GDIPlus_ShutDown ()


Func resize ($ow, $oh, $nh) ; Функция масштабирования изображения (ширина, высота, новая высота) возвращает получившуюся ширину
   $x = (($ow * $nh) / $oh)
   Return $x
EndFunc

Есть какие нибудь идеи ?

 

[idbehold]

Получить 2 ряда одинаковой высоты у Вас, вряд ли, получится.
Так как для этого нужно, чтобы можно было разделить картинки на 2 равные "полоски".
Хотя в идеальных условиях, конечно, возможно.

Могу предложить алгоритм, который раскидывает картинки в наиболее одинаковые по ширине полоски.
Правда, извините, не буду описывать это на автоит.

Делаем следующее:

1) закидываем все картинки в массив
2) подгоняем размеры картинок под одинаковую высоту (любую, потом исходя из результата перерезайзим)
3) создаем 2 массива, в первом будут все картинки, кроме последней, во втором - последняя.
Назовем их leftImages и rightImages

Далее нам понадобятся 2 функции:

Первая будет принимать на вход массив и возвращать сумму длин картинок в нем.
Назовем ее getLineWidth

Вторая - рекурсивная функция, которая расположит картинки в этих двух массивах так, чтобы получить примерно наиболее одинаковые по ширине полоски.
На вход получает 2 массива, возвращает 2 массива. Назовем ее SortImages
Далее приведен псевдокод:

Функция SortImages(leftImages, rightImages):

Запоминаем модуль разности длин картинок в массивах, тут будет храниться наилучшее расхождение длин.
bestDiff = ABS(getLineWidth(leftImages) - getLineWidth(rightImages))

Копируем "левый" и "правый" массивы, тут будут лежать наилучшие "полоски" картинок, на данный момент
bestLeftArray = leftImages;
bestRightArray = rightImages;

Для каждого элемента leftImages :
Для каждого элемента rightImages :
Создадим копии левого и правого массива, это временные переменные. назовем их tmpLeftArray и tmpRightArray
В созданных копиях меняем местами текущий элемент из левого массива с текущим элементом из правого
Если модуль разности длин картинок в полученных массивах меньше, чем bestDiff То:
запомним в bestDiff новую разность.
в bestLeftArray и bestRightArray запишем tmpLeftArray и tmpRightArray.
Конец условия
Конец цикла //rightImages
Конец цикла //leftImages

Если количество элементов в leftImages больше одного То:
Создадим копии левого и правого массива, это временные переменные. назовем их tmpLeftArray и tmpRightArray
Перемещаем последний элемент левого массива в правый
Выполняем: SortImages(tmpLeftArray, tmpRightArray);
Если получаем лучший результат То:
Запишем в bestLeftArray и bestRightArray результат выполнения функции.
Конец условия
Конец условия
Вернуть: bestLeftArray, bestRightArray;
Конец Функции


В результате получим 2 массива, с более-менее одинаковой длинной картинок.
Теперь можно пропорционально изменить размер всем картинкам, подогнав "полоски" под нужную ширину.

Рекомендую Вам, данный алгоритм реализовать не на autoit а на javascript и добавить вызов в код страницы, чтобы разместить картинки как нужно. Могу скинуть реализацию алгоритма на php.

PS. Алгоритм не оптимизированный, медленный.
Если Вам нужно размещать, скажем, по 100 картинок - нужно будет придумать что-то получше.

 

[vaf]

Два ряда одинаковой высоты и не нужно. пусть высота будет разная, главное чтобы общая ширина что у первого, что и у второго была одинаковая. Да и еще - максимальное количество картинок у меня 10 (больше не бывает), т.е. максимум два ряда.
скажем так:
если до 5 то один ряд
если 6 то по 3 в каждом
если 7 то 4+3
если 8, то по 4 и т.д.

В чем у меня весь затык ?
У меня всего один цикл который высчитывает высоту картинок и мне не хотелось бы делать несколько циклов специально для 6,7,8,9 или 10 картинок. хотелось бы все это сделать поизящнее, а вот опыта пока маловато.

 

[idbehold]

У меня есть реализация на пхп, которая раскидывает заданное количество картинок на нужное количество "полосок".

 

[vaf]

У меня есть реализация на пхп, которая раскидывает заданное количество картинок на нужное количество "полосок".

сможешь прислать ее ? Посмотрю как реализовано.

 

[C2H5OH]

idbehold,
вобщем-то неплохо. Начало алгоритма просто как по учебнику, но вот сама рекурсия как-то не того. Да и как вы собираетесь вернуть из функции два массива?
(вообще-то это сайт посвященный AutoIt, не стоит хвастаться достижениями в других ЯП)

vaf,
вот что у меня получилось. Если комментариев недостаточно, задавайте вопросы, поясню что к чему.

Спойлер

#Include <Array.au3>

$1 = _StringBetween($post_text,'title="','" src') ; Заносим в массив имена всех картинок
   
Global $width = 600 ; ширина панорамы
Global $aSizeX[UBound($1)] ; временный массив - ширина картинок после масштабирования под эталон

_GDIPlus_Startup()   

#cs
Получаем высоту первой картинки и принимаем её за эталон
#ce
$hImage = _GDIPlus_ImageLoadFromFile($Path & $1[$i]) ; Получаем ID картинки
$aSize = _GDIPlus_ImageGetDimension($hImage) ; Получаем высоту и ширину картинки $aSize[0], $aSize[1]
If Not IsArray ($aSize) Then
	MsgBox (4096, "Ошибка")
	Exit
EndIf

Global $eSizeY = $aSize[1]

#cs
В массив $aSizeX заносим ширину всех картинок после масштабирования
попутно суммируя ширину всех картинок после масштабирования
#ce
$aSizeX[0] = $aSize[0]
Global $sumX = $aSizeX[0]

For $i = 1 To UBound ($1) - 1 ; Цикл на все картинки
    $hImage = _GDIPlus_ImageLoadFromFile($Path & $1[$i]) ; Получаем ID картинки
    $aSize = _GDIPlus_ImageGetDimension($hImage) ; Получаем высоту и ширину картинки $aSize[0], $aSize[1]
	If Not IsArray ($aSize) Then
		MsgBox (4096, "Ошибка")
		Exit
	EndIf
	$aSizeX[$i] = resize ($aSize[0], $aSize[1], $eSizeY ) ; Получаем ширину изображения для высоты эталона
	$sumX += $aSizeX[$i]
	_GDIPlus_ImageDispose($hImage)
Next
_GDIPlus_ShutDown ()

#cs
Ищем такой набор картинок, чтобы его ширина была наиболее близка к половине ширины всех картинок
#ce
Global $sumX_2 = Floor($sumX/2) ; Ширина одного ряда 
Global $strBestRes = "" ; набор картинок хранится как строка индексов картинок, разделённых запятыми
Global $BestLength = 0 ; наилучшая найденная ширина набора картинок


calculate(String($aSizeX[0])) ; старт рекурсии, начиная с самой первой картинки

$BestLength = _max($BestLength, $sumX-$BestLength)

$mSizeY = resize ($eSizeY, $width, $BestLength) ; пересчёт эталона высоты картинок, так чтобы ширина ряда равнялась заданной ширине панорамы

MsgBox(0, "лучший результат", "оптимальный первый ряд картинок:"&$strBestRes&@CR&"при высоте картинок = "&$mSizeY)

Func calculate($strGrup1) ; рекурсивная функция перебора картинок
	Local $aGrup1 = StringSplit($strGrup1, ",", 2)
	Local $sum = 0
	For $i = 0 To UBound($aGrup1)-1
		$sum += Number($aGrup1[$i]) ; пересчёт суммы ширины картинок в наборе
	Next
	If Abs($sum - $sumX_2) < Abs($BestLength - $sumX_2) Then ; если ширина набора лучше чем раннее найденная, то сохраняем лучший результат
		$strBestRes = $strGrup1
		$BestLength = $sum
	EndIf
	If $sum >= $sumX_2 Then Return
	If UBound($aGrup1) = UBound($aSizeX) Then Return
	
	For $i = 1 To UBound($aSizeX)-1
		If _ArraySearch($aGrup1,$i) = -1 Then calculate( $strGrup1 & "," & $i ) ; если $i-тая картинка ещё не в наборе, то добавляем её в набор и делаем рекурсивный вызов
	Next
EndFunc

Func resize ($ow, $oh, $nh) ; Функция масштабирования изображения (ширина, высота, новая высота) возвращает получившуюся ширину
   $x = Floor (($ow * $nh) / $oh)
   Return $x
EndFunc

 

[idbehold]

Понимаю, что форум по автоит.
Предложил php решение, потому что это лучше чем разбирать псевдокод.
Да и на автоите я бы это не реализовал. Точнее, это заняло бы у меня не один час.

Файлик прикрепляю, пощелкать можно тут. http://idbeholdl.ts9.ru/demo/

 

[vaf]

idbehold
Круто. Глаза разбегаются от кол-ва строк.

C2H5OH
А у меня возникла вот какая идея. т.к. у меня максимальное количество картинок 10, то можно сделать так. Делаем вложенный цикл первый цикл будет отвечать за кол-во строк (у меня 2), а вложенный в него цикл за их обработку.
Если картинок до 4, то первый цикл исполняться не будет, обрабатываем как в моем скрипте, что я приводил в первом посте). Если кол-во картинок скажем 7, то первый цикл сработает два раза. один раз для 1,2,3,4 картинки и второй раз для 5,6,7 картинки.

 

[C2H5OH]

Ты не можешь утверждать что общее количество картинок разбивается на два ряда пополам.
Теоретически допустима ситуация что первый ряд состоит из одной картинки, а второй из всех остальных.

 

[idbehold]

Вот именно. Нужно еще и перетаскивать картинки из одного массива в другой.
Ладно, думаю автор темы реализует то, что хотел.
А можете рассказать куда вы потом эти картинки вставлять будете?

 

[vaf]

А можете рассказать куда вы потом эти картинки вставлять будете?

автоматизированная генерация HTML страниц для сайта. Ручками долго, хотелось бы автоматизировать, все уже сделал, осталось только картинки расположить.