Автоматический монтаж изображений
Выравнивание изображений при создании дизайна может оказаться сложной задачей в условиях ограничений (размер окна, количество изображений для заполнения или размер самих картинок). С помощью описываемого скрипта можно автоматически создавать монтаж и для резинового шаблона и для фиксированного (включая окно на весь экран) с заполнением всех интервалов.
Наличие белого пространства в конце контейнера может быть устранено в зависимости от опции. Последнее изображение монтажа может заполнять оставшееся пространство.
Еще одной удобной опцией является возможность устанавливать высоту для всех изображений равной высоте самой маленькой картинки, избегая увеличения и пикселизации. (По умолчанию допускается увеличение маленьких изображений, если в наборе присутствует большое количество картинок с большими размерами.)
HTML:
Структура HTML
Просто разместите изображения, которые вы планируете использовать в монтаже в контейнер со следующим классом ( ID используется для вызова плагина):
1 <div class="am-container" id="am-container">
2 <img src="images/1.jpg" title="Image 1"></img>
3 <img src="images/2.jpg" title="Image 2"></img>
4 <img src="images/3.jpg" title="Image 3"></img>
5 ...
6 </div>
По умолчанию для контейнера и изображений используются следующие стили:
1 .am-wrapper{
2 float:left;
3 position:relative;
4 overflow:hidden;
5 }
6 .am-wrapper img{
7 position:absolute;
8 outline:none;
9 }
Так как мы не определяем ширину контейнера, выше приведенный пример выведет монтаж на весь экран.
Если вы планируете использовать контейнер с фиксированной шириной, то можно просто добавить ширину.
В случае, если вы планируете получит контейнер с фиксированной высотой и шириной с вертикальной полоской прокрутки, то нужно добавить другой контейнер снаружи:
1 <div style="width:800px;height:300px;overflow-y:scroll; margin:40px auto;">
2 <div class="am-container" id="am-container">
3 ...
4 </div>
5 </div>
Опции
У плагина имеется несколько опций:
01 // Если вы используете проценты (или не устанавливаете ширину совсем)
02 // для ширину контейнера, то данную опцию надо установить в значение true.
03 // Таким образом установится свойство overflow-y для body
04 // в значение 'scroll'
05 liquid : true,
06
07 // Расстоянием между изображениями в px
08 margin : 1,
09
10 // Минимальная ширина изображения
11 minw : 70,
12
13 // Минимальная высота изображения
14 minh : 20,
15
16 // Максимальная высота изображения
17 maxh : 250,
18
19 // Изменение высоты каждой строки.
20 // Данная опция имеет более высокий приоритет, чем fixedHeight
21 alternateHeight : false,
22 // Высота будет случайной величиной в диапазоне между 'min' и 'max':
23 alternateHeightRange : {
24 min : 100,
25 max : 300
26 },
27
28 // Данная опция имеет приоритет над опцией minsize.
29 // Все изображения имеют данную высоту:
30 fixedHeight : null,
31
32 // Использование данной опции делает недействительными значения опций minw и minh.
33 // Выбор высоты осуществляется по самому маленькому изображению,
34 // когда данная опция имеет значение true:
35 minsize : false,
36
37 // Если значение опции true, в конце контейнера не будет пробелов.
38 // Последнее изображение будет заполнять все оставшееся пространство:
39 fillLastRow : false
тут демо проверьте стоит на html может кому то понравится для эконома мест 
