Необходимо растягивать или сжимать группу блоков div разной ширины относительно ширины друг друга.
<div id="main" style="width:600px">
<div id="block1" style="display:inline-block; width:100px; max-width:100px;">блок 1</div>
<div id="block2" style="display:inline-block; width:200px; max-width:200px;">блок 2</div>
<div id="block3" style="display:inline-block; width:300px; max-width:300px;">блок 3</div>
</div>
Как это должно работать:
Если начать сжимать блок main
, то первым должен сжиматься блок block3
, так как он имеет самую большую ширину. Как только block3
достигнет ширины 200px, сжатие начнут производить уже 2 блока block2
и block3
, пока оба блока не станут равны 100px. Затем сжиматься должны все три блока.
То же самое должно работать и при растягивании блока main
до ограничения max-width
для каждого блока.
Написал код, основанный на пропорциональном сжатии (через пропорциональное отношение длины блоков), но он не подходит. Нужно именно так, как я описал выше.
Заранее всем благодарен за любую помощь!
P.S. Ура! Задачу удалось решить!!!
Работающий пример здесь http://jsfiddle.net/3ym1c27L/8/ Буду рад вашим советам или комментариям.
HTML
<div id="main">
<ul id="blocks">
<li id="block0">Текст</li>
<li id="block1">Текст 123</li>
<li id="block2">Текст 1234567</li>
<li id="block3">Текст 1234567890123456789</li>
<li id="block4">Текст 1234567</li>
</ul>
</div>
CSS
body {
font-family: Arial;
font-size: 14px;
}
#main {
overflow: hidden;
white-space: nowrap;
border: 1px solid red;
font-size: 0;
letter-spacing: 0;
line-height: 0;
}
#blocks {
display: inline-block;
list-style-type: none;
margin: 0;
padding: 0;
/*border: 1px solid blue;*/
}
#blocks > li {
display: inline-block;
border: 2px solid black;
margin: 0;
padding: 5px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: normal;
line-height: normal;
font-size: 14px;
}
JS
var main = $('#main');
var blocks = $('#blocks');
var blocks_real_width = blocks.width();
var blocks_li = blocks.find('li');
var min_width = 30; // минимальная ширина блока
// массив оригинальных размеров
// нужен для восстановления исходных размеров при растяжении
var array_real_width = [];
blocks_li.each(function(i){
var w = $(this).width();
array_real_width[i] = w;
});
$(window).on('resize', function(){
var blocks_width = blocks.width();
var r = blocks_width - main.width();
if (r > 0 || blocks_real_width > blocks_width) {
var blocks_move = move(r > 0 ? 0 : 1); // 0 - сжимаем, 1 - растягиваем
if (blocks_move.length > 0) {
r = Math.ceil(r / blocks_move.length);
blocks_li.each(function(i){
if (blocks_move[i] == 1) {
var w = $(this).width() - r;
if (w < min_width) w = min_width;
if (w > array_real_width[i]) w = array_real_width[i];
$(this).width(w);
}
});
}
}
});
function move(m) {
var b = [], b_i, b_w, wo = 0, a = [];
blocks_li.each(function(i){
var w = $(this).width();
a[i] = w;
if ((m == 0 && w > wo && w > min_width) || (m == 1 && w < array_real_width[i])) {
b_i = i;
b_w = w;
}
wo = w;
});
if (b_i !== '') {
b[b_i] = 1;
$.each(a, function(i, w){
if ((m == 0 && w >= b_w) || (m == 1 && w < array_real_width[i])) {
b[i] = 1;
}
});
}
return b;
}