Если высота блоков может быть разной, а ширину нужно сделать резиновой, без скрипта не обойтись.
Оригинал: http://artgorbunov.ru/bb/soviet/20120412/
Если блоки имеют фиксированную заранее известную высоту, задача решается чистым ЦСС.
Контейнеру блоков задаётся высота (количество строк умноженное на высоту одного блока), а через overflow: hidden отсекается всё лишнее:
.gallery {
position: relative;
overflow: hidden;
height: 348px; /* 116px * 3 */
}
.gallery .item {
float: left;
width: 116px;
height: 116px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
Если высота блоков может быть разной, а ширину нужно сделать резиновой, без скрипта не обойтись. Готовя пример, я незаметно для себя написал целый джейквери-плагин:
(function ($) {
$.fn.responsiveFloats = function (options) {
var o = $.extend({
// Минимальная ширина колонки в пикселях
minWidth: 200,
// Максимальная ширина
maxWidth: false,
// Сколько строк
rows: 3,
// Класс блоков
itemClass: 'float'
}, options);
this.each(function () {
var floats = $(this);
if (!floats.data('initialized')) {
// Если ещё не инициализировано
doFloats(floats, o);
}
});
// Чейнабилити
return this;
};
var doFloats = function (floats, o) {
var parent = floats.parent();
var item = $('.' + o.itemClass, floats);
item.css({
'float': 'left',
'min-width': o.minWidth + 'px',
'max-width': o.maxWidth
});
var clear = [];
for (var _i = 0; _i < o.rows - 1; _i++) {
clear[_i] = $('
');
}
var overWidth = 2;
floats
.css('width', overWidth * 100 + '%')
.wrap('
')
.data('initialized', true);
var parentWidth, cols, _cols;
// При ресайзе окна
$(window).resize(function () {
// Доступная ширина
parentWidth = parent.width();
// Количество колонок, минимум одна
_cols = Math.max(Math.floor(parentWidth / o.minWidth), 1);
if (_cols != cols) {
// Выполняю манипуляции с блоками,
// только если количество колонок изменилось
cols = _cols;
// Ширина одной колонки
item.css('width', 100 / cols / overWidth + '%');
// Очищаю поток после каждой строки блоков
for (var _i = 0; _i < o.rows - 1; _i++) {
clear[_i].insertBefore(item.eq(cols * (_i + 1)));
}
item.each(function (index) {
// Скрываю блоки после последней строки
$(this)[index > cols * o.rows - 1 ? 'hide' : 'show']();
});
}
}).resize();
}
})(jQuery);
Любой набор блоков превращается в респонсив-галерею вызовомresponsiveFloats() на родительском контейнере:
1div>
2div>
3div>
div>
div>