Какой алгоритм используется для отображения нескольких фото в виде мозаики?

Например, как в ВК при загрузке фотографий. Речь идет о таком отображении:



UPD:
Возможно, для вывода изображения используется алгоритм TreeMap. Но не ясно, как задавать "веса" изображениям.
    

Ответы

Ответ 1

Алгоритм с сохранением порядка следования картинок.


Определяем количество строк как sqrt( сумма отношений сторон всех картинок / отношение сторон блока ), где отношение сторон определяется как ширина делённая на высоту.
Определяем высоту строки как высоту блока делённую на число строк.
Определяем общую длину всех картинок масштабированных к высоте строки.
Заполняем строки так чтобы ширина строки была максимально приближена к ширине оставшихся картинок делённой на количество оставшихся строк.
Перераспределяем высоты строк. Для этого для каждой строки считаем новую высоту так
чтобы ширина строки стала равной ширине блока. разности между новыми и старыми высотам
строк суммируем отдельно по переполненным и недозаполненным строкам. В зависимости от того какая разность больше пропорционально уменьшаем изменения высот в одной из этих групп, чтобы эти суммы сравнялись. (Галочка в примере отменяет последнее выравнивание, что позволяет сохранить соотношения сторон картинок, но нарушает высоту блока).
Для строк у которых осталось свободное пространство (до ширины блока) масштабируе
картинки так, чтобы занять всю ширину блока, после чего обрезаем их по высоте с центрированием по вертикали.
В строках, где нет свободного пространства масштабируем картинки так, чтобы их высот
была равна высоте строки, и обрезаем их по ширине с центрированием по горизонтали пропорционально их отношению сторон так, чтобы общая ширина строки была равна ширине блока.




var iimgs=document.getElementById("iimgs").childNodes;
var c=document.getElementById("c");
var images=[];
function packimgs(freeH) {
  var padding = 5;
  var divWidth = 510+padding;
  var divHeight = 350+padding;

  var w=0;
  for(var i=0;i 1.5*w/nrows) nrows-= Math.round(images[i].aspect*nrows/w)-1;
  if(nrows<1) nrows=1;
  var rows= [];
  var rowHeight= divHeight/nrows - padding;
  w= rowHeight*w + padding*images.length;
  for(var j=0; j0 && Math.abs(rowWidth-w/(nrows-1-j)) < Math.abs(rowWidth-w/(nrows-1-j)+imgWidth*2)) {
      rowWidth=0; j++;
    }
    rows[j].push(images[i]);
    rows[j].space-= imgWidth;
    rowWidth+= imgWidth;
    w-= imgWidth;
  }
  // Подгон высот
  var dhp=0, dhm=0, pn=0;
  for(j=0; jrowHeight) {
      dhp+= rows[j].height-rowHeight;
      pn++;
    } else dhm+= rowHeight-rows[j].height;
  }
  // второй этап подгона высот (пропустить если не нужно точно соблюдать высоту блока)
  if(!freeH&&dhp!=dhm) for(j=0; jrowHeight && dhp>dhm)
      rows[j].height= rowHeight + (rows[j].height-rowHeight)*dhm/dhp;
    else if(rows[j].height0? rowHeight*rowWidth1/rowWidth : rows[j].height;
    for(i=0;i0) {
        cell.style.height= rows[j].height+"px";
        rows[j][i].style.marginTop= (rows[j].height-rowHeight1)/2+"px";
      } else {
        var cwidth= rows[j][i].aspect*rowWidth1*rowHeight/rowWidth;
        cell.style.width= cwidth+"px";
        rows[j][i].style.marginLeft= (cwidth-rows[j][i].width)/2+"px";
      }
    }
  }
}
function chlimit(i) {
  c.innerHTML="";
  packimgs(i.checked);
}
images.loaded=0;
for(i=0;i

Свободная высота (без обрезки)

Алгоритм с изменением порядка картинок. Определяем количество строк как sqrt( сумма отношений сторон всех картинок / отношение сторон блока ), где отношение сторон определяется как ширина делённая на высоту. Определяем высоту строки как высоту блока делённую на число строк. Сортируем картинки по соотношению сторон, ставя в начало самые широкие. Распределяем картинки по строкам, помещая очередную картинку в строку с наибольши свободным пространством, которое определяется как ширина блока минус сумма ширин картинок смасштабированных так, чтобы их высота была равна высоте строки. Для строк у которых осталось свободное пространство (до ширины блока) масштабируе картинки так, чтобы занять всю ширину блока, после чего обрезаем их по высоте с центрированием по вертикали. В строках, где нет свободного пространства масштабируем картинки так, чтобы их высот была равна высоте строки, и обрезаем их по ширине с центрированием по горизонтали пропорционально их отношению сторон так, чтобы общая ширина строки была равна ширине блока. var iimgs=document.getElementById("iimgs").childNodes; var c=document.getElementById("c"); var images=[]; function packimgs() { var divWidth = 510; var divHeight = 350; var padding = 5; var w=0; for(var i=0;i 1.5*w/nrows) nrows-= Math.round(images[i].aspect*nrows/w)-1; if(nrows<1) nrows=1; var rows= []; var rowHeight= (divHeight-padding*(nrows-1))/nrows; for(var j=0; j1) rows[maxj].space-= padding; } for(j=0; j0? rowHeight*rowWidth1/rowWidth : rowHeight; for(i=0;i0) { cell.style.height= rowHeight+"px"; rows[j][i].style.marginTop= (rowHeight-rowHeight1)/2+"px"; } else { var cwidth= rows[j][i].width*rowWidth1/rowWidth; cell.style.width= cwidth+"px"; rows[j][i].style.marginLeft= (cwidth-rows[j][i].width)/2+"px"; } } } } for(i=0;i