JS/jQuery подходит для всех изображений внутри div (без пробелов)

У меня есть div вызов #container, Внутри этого #container у меня n количество тегов img вызывает его images n может быть 2, 10, 40 и так далее. Мне интересно, как я могу вместить n количество images внутри a #container, чтобы закрыть все пробелы stretch изображений. Качество не имеет значения Это то, что я пробовал до сих пор:

var amount = $("#container > img").length;
var amount_w = amount*200; //200 width of 1 image 
var amount_h = amount*130; //120 height  image 
var refH = $("#container").height();
var refW = $("#container").width();

var refRatio = refW/refH;
$("#container img").each(function(){
     $(this).height((amount_h-130)-refH);
     $(this).width((amount_w-230)-refW);
});

Ответ 1

Прежде всего, возможно достичь того, что вам нужно, даже при сохранении пропорций изображений, однако высота строки будет рассчитана, но это не тривиальная задача (ну, по крайней мере, не так тривиально, как формула с одной строкой).

Существует плагин jQuery под названием jPictura, который я разработал. Я считаю, что плагин делает именно то, что вам нужно.

Вот рабочая скрипка.

Вы можете найти исходные коды плагинов и документацию на GitHub.

Простой пример использования плагина:

$(document).ready(function () {
    $('#my-gallery').jpictura({
        layout: { itemSpacing: 0, justifyLastRow: true, idealRowHeight: 200}
    });
});

itemSpacing - количество пробелов между изображениями в пикселях
justifyLastRow - если true, изображения в последней строке будут растянуты, чтобы получить полную ширину строки
idealRowHeight - желаемая высота строк в пикселях. Плагин сделает все возможное, чтобы упорядочить элементы, чтобы высоты строк были как можно ближе к этому значению.
в GitHub есть гораздо больше опций

Помимо материала JS, который вычисляет правильную ширину и высоту изображений, есть еще одна вещь, которую следует учитывать в отношении пробела между изображениями. Изображения по умолчанию являются встроенными блоками, что означает, что они ведут себя как слова, а слова имеют некоторое пустое пространство между ними, верно? Сделайте их display: block; float: left; или используйте макет гибкой коробки, чтобы избавиться от пробела. Плагин использует float: left; по умолчанию.

Ответ 2

Я создал что-то, что может вас заинтересовать

var container = $('#container');
var height = container.outerHeight();
var width = container.outerWidth();

function populate(n){
    var rem_items = n;
    var rows = Math.round(Math.sqrt(n));
    var row_items = Math.ceil(n/rows);

    for (var i=0; i<rows; i++){

        // this prevents us from generating a lonely single box in a row
        if( (rem_items%(rows-i))===0 ){
            row_items = rem_items/(rows-i);
        }

        if(rem_items<row_items){
            row_items = rem_items;
        }

        rem_items = rem_items-row_items;

        for (var j=0; j<row_items; j++){
            var img_height = height/rows;
            var img_width = width/row_items;
            var img_left = j*img_width;
            var img_top = i*img_height;
            var img = $('<div class="cell"></div>');
            img.css({
                width: img_width,
                height: img_height,
                left: img_left,
                top: img_top
            });
            container.append(img);
        }
    }
}

populate(40);

https://jsfiddle.net/jLq4hgaa/1/

В принципе, он вычисляет "наиболее сбалансированное" распределение изображений по горизонтали и по вертикали.

Он делает то, о чем вы просите, в самом простом смысле. Он равномерно распределяет изображения/контейнеры внутри контейнера независимо от соотношения сторон.

Ответ 3

$(document).on("pageload",function(){
  $('.container').addClass('stretch');
});

Затем создайте css-элемент с названием "stretch", определяющий ширину: 100%

Высота: 100%, и если нужно определить макет, то есть относительный