mosaic divs

by matmuchrapna

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Mosaic images</title>
</head>
<body>
    
<div id="wrap">
        
</div>

</body>
</html>

CSS

#wrap {
    width: 980px;
    min-height: 500px;
    margin: 80px auto 0;
    background: yellow;
}

JavaScript

$(function() {

    // library
    function rand_range(a, b) {    return Math.floor((Math.random()*b)+a);    }
    
    // функция помощник для разделения картинок по ориентации
    // разделим картинки на группы по ориентации, так как строки всё-равно
    // будут состоять из одинаково-ориентированных картинок
    function group_imgs(imgs) {
        var result = [];
    
        result.horiz = [];
        result.vert = [];

        $.each(imgs, function(index, image) {
            if (image.is_horizontal) {
                result.horiz.push(image);
            } else {
                result.vert.push(image);
            }
        });

        return result;
    }

    var wrap_width = 980,
        margins = 2,
        row_min_h = 120,
        row_max_h = 250;

    // получаем(генерируем) список картинок
    // пробегаем по нему, получаем базовую информацию
    var imgs = (function generate() {
        var result = [],
            imgs_number = rand_range(20, 30);

        for (var i = 0; i < imgs_number; i++) {
            var w = rand_range(100, 300),
                h = rand_range(100, 300),
                image = {
                    'w': w,
                    'h': h,
                    'src': 'http://placekitten.com/g/' + w + '/' + h,
                    'is_horizontal': (w >= h) ? true : false
                };

            result.push(image);
        }
        
        return result;
    })();
    // console.log('imgs', imgs);
    
    // получаем макс ширину всех
    // вертикальных и горизонтальных картинок
    // (максимальная ширина одной картинки высчитывается по коэфицинту, равному
        // максимальная высоту строки / высота картинки ) * ширина картинки
    var max_widths = (function get_row_max_widths(imgs, row_max_h) {
        var result = [];
            
        result.horiz = 0,
        result.vert = 0;

        $.each(imgs, function(index, image) {
            var k = (row_max_h / image.h),
                max_w = k * image.w;
        ...